/**
 * Foundation(ish) Accordion styles.
 */

/* Layers */
@layer accordion;
@layer
    accordion.reset,
    accordion.tokens,
    accordion.core,
    accordion.theme,
    accordion.state,
    accordion.utilities,
    accordion.demo;

@layer accordion.tokens {
    :root {
        --fndish-disclosure-width: min(100%, 50rem);
        --fndish-disclosure-padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        --fndish-disclosure-border: 1px solid #214f71;
        --accordion-open-summary-color: white;
        --fndish-disclosure-radius: 0.25rem;

        --animate-delay: 0s;
        --animate-speed: 250ms;
        --animate-speed-delta: 50ms;
        --icon-speed: calc( var(--animate-speed) - 100ms );
    }
}

/* Core */
@layer accordion.core {

    :host,
    accordion-item {
        font-size: 16px; /* Alternative 16px × 0.625 = 10px → 1rem = 10px */
        line-height: var(--reset-body-line-height, 1.5);

        &:focus-within {
            /* box-shadow: 0 0 0 3px blue; */
        }


        /*
            Trigger
        */

        button {
            cursor: pointer;
            appearance: none;
            background: none;
            /* border:none; */
            display: flex;
            flex-flow: row wrap;
            width: 100%;
            position: relative;

            text-align: left;
        }

        &::part(trigger) {
            cursor: pointer;
            appearance: none;
            border:none;
            background: none;

            display: flex;
            flex-flow: row wrap;
            width: 100%;
            position: relative;

            text-align: left;
        }


        button[aria-expanded] + div[id] {
            padding: var(--fndish-disclosure-padding);
        }


        /*
            Panel
        */

        details summary + :where(*),
        details summary::details-content {
            padding: var(--fndish-disclosure-padding);
        }

        /* Shadow DOM */
        &::part(panel) {
            padding: var(--fndish-disclosure-padding);
        }

    }

}

@layer accordion.theme {
    accordion-items {
        --fndish-disclosure-width: min(100%, 42rem);
        display: block;
        width: var(--fndish-disclosure-width);
        padding: 0.2rem 1rem 0.2rem 1rem;
        margin-inline: auto;
        margin-bottom: 1rem;
        border-radius: 1rem;
        overflow: clip;

        &:last-child {
            margin-bottom: 0;
        }
    }

    :host,
    accordion-item {
        --color-gray-alpha: 0.5;
        display: block;
        width: var(--fndish-disclosure-width);
        /* border-bottom: 2.5px solid rgba(170, 170, 170, 0.25); */

        position: relative;

        &:not(:last-child)::after {
            --offset-x: 0.65rem;
            content: "";
            background-color: rgba(170, 170, 170, var(--color-gray-alpha));

            position: absolute;
            bottom: 0;
            left: 0;
            translate: var(--offset-x) 0;
            width: calc(100% - (var(--offset-x) + 0.75rem));
            height: 2px;
        }

        &[expanded] {
            margin-bottom: 0;
        }

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


        /*
            Container
        */

        details,
        .disclosure {
            border-radius: var(--fndish-disclosure-radius, calc(14/16*1rem));
            transition: border-color 0.15s, box-shadow 0.15s;
        }


        /*
            Trigger
        */

        summary,
        button {
            --accordion-open-summary-color: var(--color-softblack);

            cursor: pointer;

            color: var(--accordion-open-summary-color, white);
            font-weight: bold;
            text-align: left;

            padding: var(--fndish-disclosure-padding, 0.5rem);
            padding-block: 1rem;
            padding-inline-start: 0.65rem;

            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-between;

            font-size: var(--font-size-lg);
            font-family: var(--font-sans);

            border:none;
            outline: none;

            @media (width <= 500px) {
                font-size: 1.1rem;
            }

            /* Focus indicator */
            & > span {
                display:inline-block;
                width: 100%;

                position: relative;

                b {
                    position: relative;
                    z-index: 1;
                }

                &::after {
                    --offset: 24px;
                    content: '';
                    display: block;
                    position: absolute;

                    width: calc(100% + var(--offset));
                    height: calc(100% + var(--offset)/2);
                    top: calc(var(--offset)/2/2*-1);
                    left: calc(var(--offset)/2*-1);
                    translate: -2px 0;
                    z-index: 0;
                    /* border-radius: 1rem; */
                }
            }

            &:focus-visible > span::after {
                outline: 3px solid var(--color-focus);
                outline-offset: 3px;
            }
        }


        /*
            Panel
        */

        button + div[id] {
            padding: var(--fndish-disclosure-padding);
            padding-block-start: 0;
            padding-block-end: 1.05rem;
        }

        details summary + :where(*),
        details summary::details-content {
            padding: var(--fndish-disclosure-padding);
            padding-block-start: 0;
            padding-block-end: 1.75rem;
            padding-inline-end: 2.5rem;

            font-size: 1.35rem;

            li {
                font-size: 0.9em;
                color: var(--color-mutedblack);
            }

            p {
                font-size: 1.1rem;
                margin-bottom: 1rem;

                @media (width <= 500px) {
                    font-size: 1rem;
                }
            }

            /* p:has(+ p) {
                margin-block-end: 1rem;
            } */
        }

        details .details-content[class] {
            padding-block: 0.24rem 0.75rem;
        }

        details summary + div {
            transform: translateY(-2px);
        }

        details:focus-within {

        }


        /*
            Expanded
        */

        /* Trigger */
        details[open] summary,
        button[aria-expanded="true"] {

            color: var(--accordion-open-summary-color);
            font-weight: bold;
        }

        /* Icons */
        &.right-icon :is(button, summary),
        &.left-icon :is(button, summary) {

            &[aria-expanded="true"]::before {
                transform: translate(-1px, -1.5px) rotate(var(--expanded-icon-rotation, 45deg));
            }

            &[aria-expanded="true"]::after {
                transform: translate(-1px, -0.5px) rotate(var(--expanded-icon-rotation, 45deg));
            }
        }

        &.left-icon[class] details[open] summary {

            &::before {
                transform: translate(-1px, -50%) rotate(45deg);
            }
        }

        &.right-icon[class] details[open] summary {

            &::after {
                transform: translate(1.15px, -1px) rotate(var(--expanded-icon-rotation, 45deg));
            }
        }


        /*
            Hover, focus
        */

        &.right-icon[class] details  {

            & :is(summary:hover, summary:focus-visible)::before {
                background-color: #ffffff;
                box-shadow: 0 0.25px 0.5px 0.5px #aaaaaa73;

                @media (prefers-contrast: more) {
                    box-shadow: 0 0 0 2px #aaaaaa73;
                }
            }
        }


        /*
            Arrow Icon
        */

        &.right-icon :is(button, summary),
        &.left-icon :is(button, summary) {
            --expanded-icon-rotation: 45deg;
            position: relative;

            & {
                list-style: none;

                &::marker {
                    content: none;
                }

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

            &::after {
                content: "";
                border-right: 0.15em solid currentColor;
                border-bottom: 0.15em solid currentColor;
                margin-right: 0.45rem;
                /* transform: translate(-1px, -0.5px) rotate(-45deg); */

                /* position: relative; */
                display: inline-block;
                width: 0.5em;
                height: 0.5em;
                transition: 0.09s transform ease-in-out;
                pointer-events: none;
                z-index: 1;

                position: absolute;
                right: 0.5rem;
                transform: translate(-1px, -0.5px) rotate(-45deg);
            }
        }

        &.left-icon :is(button, summary) {
            justify-content: flex-start;

            &::after {
                display: none;
            }

            &::before {
                content: "";
                border-right: 0.15em solid currentColor;
                border-bottom: 0.15em solid currentColor;
                margin-right: 0.45rem;
                /* margin-left: auto; */
                transform: translate(-1px, -0.5px) rotate(-45deg);

                position: relative;
                display: inline-block;
                width: 0.5em;
                height: 0.5em;
                pointer-events: none;

                transition: 0.075s transform ease-out;
            }
        }

        &.right-icon[class] details  {

            & :is(summary)::before {
                content: '';
                z-index: 0;
                display: block;
                width: 32px;
                height: 32px;
                border-radius: 999px;
                position: absolute;
                top: 50%;
                right: 0;
                translate: -3.5px -51%;

                background-color: transparent;
                box-shadow: 0 0 0 2px transparent;

                transition: var(--icon-speed) background-color,
                            var(--icon-speed) box-shadow;
            }
        }


        /*
            Slide transition for expanded and collapsed states
        */

        &.animate-in-out {
            interpolate-size: allow-keywords;

            &:focus-visible {
                overflow-y: visible;
            }


            /*
                Custom Disclosure
            */

            & .disclosure > button + div {
                overflow: clip;
                block-size: 0;
                opacity: 0;
                display: none;

                /* Fix jank on collapse */
                padding-bottom: 0;

                transition:
                    block-size var(--animate-speed, 250ms) var(--animate-delay) ease,
                    opacity calc( var(--animate-speed) - var(--animate-speed-delta) ) var(--animate-delay) ease,
                    display var(--animate-speed) var(--animate-delay) ease allow-discrete,
                    content-visibility var(--animate-speed) var(--animate-delay) ease allow-discrete;

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

                & *:last-child {
                    padding-bottom: 1.05rem;
                }
            }

            &[expanded] .disclosure > button + div {
                block-size: auto;
                opacity: 1;
                display: block;

                /* Start newly opened panels from the collapsed state before animating to auto. */
                @starting-style {
                    & {
                        block-size: 0;
                        opacity: 0;
                    }
                }
            }


            /*
                Details Disclosure
            */

            details::details-content {
                block-size: 0;
                overflow: clip;
                opacity: 0;

                transition:
                    block-size var(--animate-speed, 250ms) ease,
                    opacity calc( var(--animate-speed, 250ms) - 50ms ) ease,
                    content-visibility var(--animate-speed, 250ms) ease allow-discrete;
            }

            details[open]::details-content {
                block-size: auto;
                opacity: 1;
            }

            @starting-style {
                details[open]::details-content {
                    block-size: 0;
                    opacity: 0;
                }
            }

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

        &.animate-in {
            interpolate-size: allow-keywords;

            /* Keep the closed panel transitionable even when the component adds [hidden]. */
            & .disclosure > button + div {
                overflow: clip;
                block-size: 0;
                opacity: 0;
                /* display: none; */

                transition:
                    block-size var(--animate-speed, 250ms) var(--animate-delay) ease,
                    opacity calc( var(--animate-speed) - var(--animate-speed-delta) ) var(--animate-delay) ease,
                    /* display var(--animate-speed) var(--animate-delay) ease allow-discrete, */
                    content-visibility var(--animate-speed) var(--animate-delay) ease allow-discrete;

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

            &[expanded] .disclosure > button + div {
                block-size: auto;
                opacity: 1;
                /* display: block; */

                /* Start newly opened panels from the collapsed state before animating to auto. */
                @starting-style {
                    & {
                        block-size: 0;
                        opacity: 0;
                    }
                }
            }
        }
    }

    /* This will not work */
    :host.right-icon {}
}