@use '../function' as *;
@use '../mixin';

@mixin roolith-sidebar-nav() {
    .sidebar-nav-group {
        padding: var(--r-sidebar-nav-padding) calc(var(--r-sidebar-nav-padding) / 2);
        border-bottom: rem(1) solid var(--r-sidebar-group-sep-color);

        &:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    .sidebar-nav-header {
        color: var(--r-sidebar-nav-header-color);
        font-size: rem(11);
        text-transform: uppercase;
        padding: 0 calc(var(--r-sidebar-nav-padding) / 2) rem(5);
        display: none;

        @include mixin.breakpoint(large-up) {
            display: block;
        }
    }

    .sidebar-nav-list {
        .sidebar-nav-list {
            margin: 0 calc((var(--r-sidebar-nav-padding) / 2) * -1) 0 rem(12);
            display: none;

            &.is-open {
                display: none;

                @include mixin.breakpoint(large-up) {
                    display: block;
                }
            }
        }
    }

    .sidebar-nav-list-item {
        padding: 0 calc(var(--r-sidebar-nav-padding) / 2);
        border-radius: var(--r-sidebar-nav-item-border-radius);
        margin: rem(3) 0;

        &.is-active {
            background-color: var(--r-sidebar-nav-active-background-color);

            .sidebar-nav-list-link {
                color: var(--r-sidebar-nav-active-color);
            }
        }

        .sidebar-nav-list-item {
            margin: 0;
        }
    }

    .sidebar-nav-list-link {
        font-size: rem(14);
        color: var(--r-sidebar-nav-link-color);
        display: flex;
        align-items: center;
        gap: rem(7);
        padding: rem(8) 0;
        @include mixin.transition('color');

        &:hover {
            color: var(--r-sidebar-nav-link-hover-color);
        }
    }

    .sidebar-nav-list-label {
        font-weight: var(--r-sidebar-nav-list-label-font-weight, 600);
        display: none;

        @include mixin.breakpoint(large-up) {
            display: block;
        }
    }

    .sidebar-nav-list-badge {
        margin-left: auto;
        display: none;

        @include mixin.breakpoint(large-up) {
            display: block;
        }
    }

    .sidebar-nav-list-dropdown {
        @include mixin.triangle(down, var(--r-sidebar-nav-item-caret-size));
        margin-left: auto;
        display: none;

        @include mixin.breakpoint(large-up) {
            display: block;
        }

        + .sidebar-nav-list-badge {
            margin-left: 0;
        }
    }

    // compact mode
    .sidebar-nav-compact {
        .sidebar-nav-header,
        .sidebar-nav-list-label,
        .sidebar-nav-list-dropdown,
        .sidebar-nav-list-badge,
        .sidebar-nav-list .sidebar-nav-list {
            display: none;
        }

        .sidebar-nav-list {
            display: inline-block;
        }

        .sidebar-nav-list-link {
            font-size: rem(16);
        }
    }
}