// =============================================================================
// 31-modules / sidebar / output
// =============================================================================

@use "sass:map";
@use "../../01-core/prefix" as *;
@use "./sidebar.config" as config;
@use "./sidebar.mixins" as *;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-sidebar {
        @include ss-sidebar;

        &--left {
            @include ss-sidebar-left;
            > .#{$ss-prefix-module}-sidebar__menu {
                border-right: q(1) solid
                    map.get(config.$sidebar-config, "border-color");
            }
        }

        &--right {
            @include ss-sidebar-right;
            > .#{$ss-prefix-module}-sidebar__menu {
                border-left: q(1) solid
                    map.get(config.$sidebar-config, "border-color");
            }
        }

        &__menu {
            @include ss-sidebar-menu;
        }

        // Narrow viewports: an open menu overlays the content instead of
        // squeezing the main column to a sliver (WCAG 1.4.10 reflow).
        @media screen and (max-width: 48em) {
            &--left > &__menu.active,
            &--left > &__menu.is-active,
            &--right > &__menu.active,
            &--right > &__menu.is-active {
                position: absolute;
                inset-block: 0;
                z-index: var(--ss-z-navbar, 100);
                max-width: calc(100vw - #{q(80)});
                overflow-y: auto;
                background-color: var(--ss-color-background);
            }

            &--left > &__menu.active,
            &--left > &__menu.is-active {
                inset-inline-start: 100%;
            }

            &--right > &__menu.active,
            &--right > &__menu.is-active {
                inset-inline-end: 100%;
            }
        }
        &__control {
            @include ss-sidebar-control;
        }

        &__section {
            @include ss-sidebar-section;
        }

        &__accordion {
            @include ss-sidebar-accordion;

            &__header {
                @include ss-sidebar-accordion-header;

                &--nested {
                    @include ss-sidebar-accordion-header-nested;
                }
            }

            &__icon {
                @include ss-sidebar-accordion-icon;
            }

            &__content {
                @include ss-sidebar-accordion-content;
            }

            // Rotate the .__icon span when the parent <details> is open
            // so the ▶ visually becomes a ▼.
            &[open] > &__header > &__icon {
                transform: rotate(90deg);
            }
        }

        &__subsection {
            &__list {
                @include ss-sidebar-subsection-list;
            }
            &__description {
                @include ss-sidebar-subsection-description;
            }
        }
    }
}