/* Default theme (white/grey backgrounds) */
[data-block='accordion'] {
    [data-accordion-item] {
        border-color: rgb(0 0 0 / 0.2);
    }

    [data-accordion-trigger] {
        color: rgb(0 0 0 / 0.6);
    }

    [data-accordion-icon] {
        background-color: rgb(0 0 0 / 0.5);
    }

    [data-accordion-icon] {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    /* Blue background theme */
    &.bg-blue {
        [data-accordion-item] {
            border-color: rgb(255 255 255 / 0.2);
        }

        [data-accordion-trigger] {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }

        [data-accordion-icon] {
            background-color: rgba(255,255,255,0);
        }

        [data-accordion-icon] {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }

        [data-accordion-item]:hover [data-accordion-trigger],
        [data-accordion-item].active [data-accordion-trigger] {
            --tw-text-opacity: 1;
            color: rgb(168 172 217 / var(--tw-text-opacity, 1));
        }

        [data-accordion-item]:hover [data-accordion-icon],
        [data-accordion-item].active [data-accordion-icon] {
            --tw-bg-opacity: 1;
            background-color: rgb(168 172 217 / var(--tw-bg-opacity, 1));
        }

        [data-accordion-item]:hover [data-accordion-icon],
        [data-accordion-item].active [data-accordion-icon] {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }
    }
}

/* Item behavior and interactive states */
[data-accordion-item] {
    [data-accordion-content] {
        grid-template-rows: 0fr;
    }

    &:hover [data-accordion-trigger],
    &.active [data-accordion-trigger] {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    }

    &.active {
        [data-accordion-content] {
            grid-template-rows: 1fr;
        }

        [data-accordion-icon] svg {
            --tw-rotate: 45deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
    }
}