/* Indux Accordions */

@layer components {


    :where(details):not(.unset) {
        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)
        }

        &> :not(summary) {
            padding: var(--spacing-field-padding, 0.625rem) 0
        }

        /* Content */
        :where(summary) {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            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(98.17% 0.0005 95.87)) 40%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            &:active {
                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 50%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            /* Add custom icon */
            &:before {
                content: "";
                order: 1;
                width: 1rem;
                height: 1rem;
                background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 50%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
                -webkit-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-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"));
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
                transform: rotate(0);
                transition: 0.25s transform ease
            }
        }
    }

    /* RTL support */
    [dir=rtl] :where(details):not(.unset) {
    
        & summary::before {
            transform: rotate(180deg)
        }

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