/*

In this file:

// A. Modules
// B. Button Aria Expanded
// C. Variables
// D. Collapse Utility

*/

//////////////////////////////////////////////
// A. Modules
//////////////////////////////////////////////

@use 'sass:map';
@use './breakpoint';

//////////////////////////////////////////////
// B. Button Aria Expanded
//////////////////////////////////////////////

@layer component {

    .button[aria-expanded="true"] {
        background-color: var(--subtle-fill-2);
    }

} // end @layer

//////////////////////////////////////////////
// C. Variables
//////////////////////////////////////////////

:root {
    --collapse-animation-duration: 0.25s;
}

//////////////////////////////////////////////
// D. Collapse Utility
//////////////////////////////////////////////

@layer utility {

    .collapse {
        display: grid;
        grid-template-rows: 0fr;

        overflow: clip;

        visibility: hidden;

        height: 0;

        &:not(.shown) {
            padding-block: 0 !important;
        }

        &.shown {
            grid-template-rows: 1fr;

            height: auto;
            
            visibility: visible;
        }

        @supports (interpolate-size: allow-keywords) {

            grid-template-rows: unset;

            &.shown {
                grid-template-rows: unset;
            }

            &[data-active] {

                // Exit
                transition: height var(--collapse-animation-duration) ease,
                            padding-block var(--collapse-animation-duration) ease,
                            visibility var(--collapse-animation-duration) step-end;

                @media (prefers-reduced-motion: reduce) {
                    transition: none;
                }

                &.shown {

                    // Enter
                    transition: height var(--collapse-animation-duration) ease-in-out,
                                padding-block var(--collapse-animation-duration) ease-in-out,
                                visibility var(--collapse-animation-duration) step-start;

                    @media (prefers-reduced-motion: reduce) {
                        transition: none;
                    }
                }
            }
        }
    }

    // Shown Breakpoints

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

        @if $mod != '' {
            @include breakpoint.breakpoint-up($breakpoint) {

                .collapse.shown#{$mod} {
                    grid-template-rows: 1fr;
                    visibility: visible;

                    overflow: unset;

                    @supports (interpolate-size: allow-keywords) {
                        height: auto;
                    }
                }
            }
        }
    }

} // end @layer