/*

In this file:

// A. Modules
// B. Variables
// C. Component

*/

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

@use './icon';

//////////////////////////////////////////////
// B. Variables
//////////////////////////////////////////////

:root {
    --accordion-button-padding-x: var(--container-padding-x);
    --accordion-button-padding-y: 0.75em;

    --accordion-panel-padding-x: var(--accordion-button-padding-x);
    --accordion-panel-padding-y: 1em;
    
    --accordion-active-color: currentColor;

    --accordion-icon-closed: "\f116";
    --accordion-icon-open: "\f119";

    --accordion-animation-duration: 0.3s;
    --accordion-gap-size: 0.2em;
}

//////////////////////////////////////////////
// C. Component
//////////////////////////////////////////////

@layer component {

    // Primary Accordion Block

    .accordion {
        display: grid;
        
        gap: var(--accordion-gap-size);
    }

    // Accordion Elements

    [data-accordion="heading"] {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .accordion__button {
        position: relative;
        overflow: hidden;

        background-color: var(--subtle-fill-1);

        border-radius: var(--button-border-radius);

        display: flex;
        align-items: baseline;
        justify-content: space-between;
        
        width: 100%;

        padding-block: var(--accordion-button-padding-y);
        padding-inline: var(--accordion-button-padding-x);

        margin-block-end: 0;

        font-weight: var(--body-font-weight-bold);

        text-align: start;

        cursor: pointer;

        &[aria-expanded="true"] {
        
            background-color: var(--subtle-fill-2);
            
            color: var(--accordion-active-color);

            &::after {
                content: var(--accordion-icon-open);
            }

            .text {
                text-decoration: underline;
            }
        }
        
        &::after {
            @extend .icon_font;

            --icon-size: 0.875em;
            
            content: var(--accordion-icon-closed);

            margin-inline-start: 0.75em;
        }
    }

    .accordion__panel {
        overflow: hidden;

        border-radius: var(--button-border-radius);

        display: grid;
        grid-template-rows: 0fr;

        // Close
        transition: grid-template-rows calc(var(--accordion-animation-duration) * 0.75) ease-in;

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

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

            // Open
            transition: grid-template-rows var(--accordion-animation-duration) ease-out;

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

    .accordion__panel__content {
        overflow: hidden;

        padding-inline: var(--accordion-panel-padding-x);
        padding-block: 0;

        opacity: 0;

        // Close
        transition:
            opacity calc(var(--accordion-animation-duration) * 0.5) ease-in,
            padding-block-start calc(var(--accordion-animation-duration) * 0.75) ease-in,
            padding-block-end calc(var(--accordion-animation-duration) * 0.75) ease-in;

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

        .accordion__panel.shown & {
            padding-block: var(--accordion-panel-padding-y);

            opacity: 1;

            // Open
            transition:
                opacity var(--accordion-animation-duration) ease-out,
                padding-block-start var(--accordion-animation-duration) ease-out,
                padding-block-end var(--accordion-animation-duration) ease-out;

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

} // end @layer