/* Manifest Accordions */

@layer base, components, utilities;

@layer components {


    :where(details):not(.unstyle) {
        width: 100%;
        transition: var(--transition, all .05s ease-in-out);

        /* Rotate icon */
        &[open]>summary:before {
            transform: rotate(90deg)
        }

        /* Content spacing */
        & [open] summary {
            margin-bottom: calc(var(--spacing, 0.25rem) * 4)
        }

        &>:last-child {
            margin-bottom: calc(var(--spacing, 0.25rem) * 8)
        }

        /* Content */
        :where(summary) {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-field-padding, 0.625rem) 0;
            font-weight: bold;
            color: var(--color-content-stark, oklch(43.9% 0 0));
            user-select: none;
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out);

            /* Hide default caret */
            &::marker,
            &::-webkit-details-marker {
                display: none;
                content: ""
            }

            &:hover {
                color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 40%, var(--color-content-stark, oklch(43.9% 0 0)))
            }

            &:active {
                color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 50%, var(--color-content-stark, oklch(43.9% 0 0)))
            }

            /* Add custom icon */
            &:before {
                content: "";
                order: 1;
                width: 1rem;
                height: 1rem;
                background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
                mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
                transform: rotate(0);
                transition: 0.25s transform ease
            }
        }
    }

    /* RTL support */
    [dir=rtl] :where(details):not(.unstyle) {

        & summary::before {
            transform: rotate(180deg)
        }

        &[open]>summary::before {
            transform: rotate(90deg)
        }
    }
}