@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@use '../../components/button' as button;

@mixin sidebar {
    --spc: #{var.get('measure/1x')};    //                        var(--spc)      16px
    --spc-7_8: calc(var(--spc) * .875); // 7/8 of the base        var(--spc-7_8)  14px
    --spc-6_8: calc(var(--spc) * .750); // 6/8 = 3/4 of the base  var(--spc-6_8)  12px
    --spc-4_8: calc(var(--spc) * .500); // 4/8 = 1/2 of the base  var(--spc-4_8)  8px
    --spc-3_8: calc(var(--spc) * .375); // 3/8 of the base        var(--spc-3_8)  6px
    --spc-2_8: calc(var(--spc) * .250); // 2/8 = 1/4 of the base  var(--spc-2_8)  4px

    display: flex;
    flex-direction: column;
    border: none !important;
    color: var(--color-text-light-2) !important;
    padding: 0 !important;

    // reset padding and margin for all children
    >*, .issue-sidebar-combo>*, >text+*, >.ui>* {
        margin: unset !important;
        padding: unset !important;
        font-size: var.get('font-size/sm') !important;
    }

    // alignment for main children elements
    >.ui, >.text, >.ui {
        padding-left: var(--spc-4_8) !important;
        padding-right: 0 !important;
    }

    .ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column {
        padding-left: unset;
        padding-right: unset;
    }

    // reset for all actionable elements
    button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    // -------------------------------------------------------------- // 
    // ---------------------- Elements Styling ---------------------- //
    // -------------------------------------------------------------- //
    
    a:hover {
        text-decoration: none !important;
    }

    // dividers
    >.divider {
        width: calc(100% - var(--spc-4_8)) !important;
        align-self: flex-end;
        margin: var(--spc-7_8) 0 !important;
    }


    // select branch dropdown
    .select-branch {
        align-self: flex-end;

        .branch-dropdown-button {
            @include button.hollow;
        }

        +.divider {
            border: none !important;
            margin: var(--spc-4_8) 0 !important;
        }

        .menu {
            --color-menu: #{color.get('elevation/3')};

            .branch-tag-item.active, .reference-list-menu, .reference-list-menu .item {
                --color-menu: #{color.get('elevation/4')} !important;
            }

            .branch-tag-item {
                --border-radius: #{var(--spc-4_8)};

                &:hover {
                    color: currentColor !important;
                }
            }
        }
    }

    .issue-sidebar-combo {
        display: flex;
        flex-direction: column;
        gap: var(--spc-4_8) !important;

        > * {
            padding-left: var(--spc-4_8) !important;
            padding-right: var(--spc-4_8) !important;
        }

        .ui.dropdown {
            padding-top: var(--spc-3_8) !important;
            padding-bottom: var(--spc-3_8) !important;
            font-size: var.get('font-size/sm');
            transition: background-color .1s ease;
            border-radius: var(--border-radius) !important;

            >a {
                flex: 1;
                display: flex;
                justify-content: space-between;

                &:hover {
                    color: currentColor !important;
                    text-decoration: none !important;
                }
            }

            &:hover {
                background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5);
            }
        }
    }

    // direct text children
    >.text {
        // background-color: orange !important;
        flex: 1;
        display: flex !important;
        justify-content: space-between;
        font-weight: 500 !important;
        margin-bottom: var(--spc-6_8) !important;

        strong {
            font-weight: 500 !important;
        }
    }

    .watching {
        display: flex;
        flex-direction: column;
        gap: var(--spc-6_8) !important;

        button {
            font-weight: 500;
            padding: var(--spc-4_8) var(--spc-6_8) !important;
            border-radius: var(--border-radius) !important;

            svg {
                color: color.get('subtle') !important;
            }
        }
    }

    .depending {
        // title
        >.text {
            display: inline-block;
            margin-bottom: var(--spc-6_8) !important;
        }

        >p {
            margin-bottom: var(--spc-4_8) !important;
        }

        .divided.list {
            display: flex;
            flex-direction: column;
            gap: var(--spc) !important;

            .dependency {
                border: none !important;

                .item-left {
                    a { // issue

                    }

                    div.text { // repo
                        font-size: var.get('font-size/xs') !important;
                    }
                }

                // if not the first dependency in the list, we add a :before element to serve as divider
                &:not(:first-child) {
                    position: relative;
                    &:before {
                        content: '';
                        display: block;
                        position: absolute;
                        top: -8px;
                        left: 0;
                        height: 1px;
                        width: 100%;
                        background-color: color.get('elevation/4');
                    }
                }
            }
        }

        #new-dependency-drop-list {
            padding: var(--spc-3_8) var(--spc-6_8) !important;
            // make radius to the right be 0 to merge with the add button
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;

            &.active {
                // restore right border to 1px when active
                border-top-left-radius: var(--border-radius) !important;
                border-bottom-left-radius: var(--border-radius) !important;
                border-color: color.get('elevation/5') !important;
                outline: 2px solid var(--color-accent);
            }

            input {
                padding: var(--spc-3_8) var(--spc-6_8) !important;
                line-height: 20px !important;
            }
        }

        button {
            padding: var(--spc-4_8) !important;
        }
    }

    // reference
    div.ui.equal.width.compact.grid {
        button {
            @include button.hollow;
            display: flex;
            color: color.get('subtle') !important;
            width: unset !important;
        }
    }

    // issue due date form
    .issue-due-form {
        * {
            color: color.get('subtle') !important;
        }

        // input of type date
        input[type="date"] {
            padding: var(--spc-4_8) var(--spc-6_8) !important;
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }
        
        button {
            padding: var(--spc-4_8) !important;
            border-top-right-radius: var(--border-radius) !important;
            border-bottom-right-radius: var(--border-radius) !important;
        }
    }

    // direct form child
    >form, .form {
        display: flex;
        flex-direction: column;
        gap: var(--spc-4_8) !important;
    }

    // buttons at the end of the sidebar
    >form button, >button {
        font-size: var.get('font-size/sm') !important;
        border: none !important;
        background: transparent !important;
        padding: var(--spc-3_8) var(--spc-4_8) !important;
        justify-content: start !important;
        gap: var(--spc-4_8) !important;
        margin-bottom: var(--spc-2_8) !important;
        border-radius: var(--border-radius) !important;

        svg {
            color: color.get('subtle') !important;
        }

        &:hover {
            background: color.get('elevation/4') !important;
        }

        // if the data-modal attr is #sidebar-delete-issue, make the color red
        &[data-modal="#sidebar-delete-issue"] {
            color: color.get('palette/red/base') !important;
            svg {
                color: color.get('palette/red/base') !important;
            }

            &:hover {
                background: rgba(#{color.get('palette/red/dark/15%', 'rgb')}, 0.1) !important;
            }
        }
    }
}