@use "../../01-core/prefix" as *;
@use "./accordion.mixins" as accordion;

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

    .#{$ss-prefix-module}-accordion__item {
        @include accordion.ss-accordion-item;
    }

    .#{$ss-prefix-module}-accordion__header {
        @include accordion.ss-accordion-header;
    }

    .#{$ss-prefix-module}-accordion__header[aria-expanded="true"],
    .#{$ss-prefix-module}-accordion__header.is-active {
        @include accordion.ss-accordion-header-active;
    }

    // `__content` is the body element used with native <details>.
    .#{$ss-prefix-module}-accordion__body,
    .#{$ss-prefix-module}-accordion__content {
        @include accordion.ss-accordion-body;
    }

    // ---- Native <details>/<summary> accordion --------------------------------
    summary.#{$ss-prefix-module}-accordion__header {
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }
    }

    .#{$ss-prefix-module}-accordion[open]
        > .#{$ss-prefix-module}-accordion__header {
        @include accordion.ss-accordion-header-active;
    }

    .#{$ss-prefix-module}-accordion__title {
        flex: 1 1 auto;
        min-width: 0;
    }

    // Chevron: a rotated corner, pointing down when closed and up when open.
    .#{$ss-prefix-module}-accordion__icon {
        @include accordion.ss-accordion-icon;
    }

    .#{$ss-prefix-module}-accordion[open]
        > .#{$ss-prefix-module}-accordion__header
        .#{$ss-prefix-module}-accordion__icon,
    .#{$ss-prefix-module}-accordion__header[aria-expanded="true"]
        .#{$ss-prefix-module}-accordion__icon {
        transform: rotate(-135deg);
    }

    // ---- Variants -------------------------------------------------------------
    .#{$ss-prefix-module}-accordion--bordered {
        @include accordion.ss-accordion-bordered;
    }

    .#{$ss-prefix-module}-accordion--filled {
        @include accordion.ss-accordion-filled;
    }

    // ---- Groups: items share the group's frame ---------------------------------
    .#{$ss-prefix-module}-accordion__group {
        @include accordion.ss-accordion-group;
    }
    .#{$ss-prefix-module}-accordion__group--flush {
        @include accordion.ss-accordion-group-flush;
    }
    .#{$ss-prefix-module}-accordion__group > .#{$ss-prefix-module}-accordion {
        @include accordion.ss-accordion-group-item;

        & + .#{$ss-prefix-module}-accordion {
            @include accordion.ss-accordion-group-divider;
        }
    }

    .#{$ss-prefix-module}-accordion__item:not(.is-open)
        .#{$ss-prefix-module}-accordion__body {
        display: none;
    }
}