.accordion {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-2);
    & .accordion--tab {
        overflow: hidden;
        width: 100%;
        font-weight: 400;
        font-family: var(--font-title);
        background: var(--background-transparent-1);
        border-radius: var(--radius-lg);
        text-align: center;
        box-shadow: var(--shadow-sm);
        list-style-type: none;
        backdrop-filter: blur(8px);
        transition: var(--transition-2);
        & button {
            width: 100%;
            font-size: 1.05rem;
            line-height: 1.5;
            font-family: var(--font-title);
            font-weight: 500;
            box-shadow: var(--shadow-sm);
            background: var(--color-purple-lt-ext);
            transition: var(--transition-2);
            display: flex;
            position: relative;
            & .accordion--title {
                padding: var(--spacing-2);
                position: relative;
                display: block;
                width: calc(100% - var(--spacing-6));
                text-align: left;
            }
            &:hover,
            &:focus-visible,
            &[aria-expanded="true"] {
                outline: none;
                background-color: var(--color-purple-lt);
                transition: var(--transition-1);
                transform: var(--transform-4);
                & .accordion--icon {
                    &:before,
                    &:after {
                        background-color: var(--color-bg);
                        transform: var(--transform-4);
                    }   
                }
            }
            &[aria-expanded="true"] {
                & .accordion--icon {
                    &:before {
                        transform: scale(1)rotate(45deg);
                    }
                    &:after {
                        transform: scale(1) rotate(-45deg);
                    }
                    &:before,
                    &:after {
                        background-color: var(--color-bg);
                    }
                }
            }
            & .accordion--icon {
                position: absolute;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                right: calc(24px + var(--spacing-1));
                top: 0;
                bottom: 0;
                width: 24px;
                &:before {
                    transform: scale(0.95) rotate(90deg);

                }
                &:after {
                    transform: scale(0.95) rotate(0deg);
                }
                &:before,
                &:after {
                    content: "";
                    width: 6px;
                    height: 24px;
                    background: var(--color-purple-lt);
                    border-radius: var(--radius-sm);
                    transform-origin: center;
                    position: absolute;
                    transition: var(--transition-2);
                    outline: 1px solid var(--color-purple);
                    outline-offset: 2px;
                }
            }
        }

        & .accordion--panel {
            display: grid;
            grid-template-rows: 0fr;
            transition: var(--transition-2);
            box-sizing: border-box;
    
            & .accordion--tab__content {
                overflow: hidden;
                padding: 0;
                will-change: padding, border-top, grid-template-rows;
                & p {
                    /* transform: translate(0, 120px); */
                    opacity: 0;
                    will-change: opacity;
                    transition: 0.5s ease-in-out;
                }
            }
        }
    
        &:has(> button[aria-expanded="true"]) {
            & .accordion--panel {
                grid-template-rows: 1fr;
                padding: var(--spacing-3);
                transition: var(--transition-2);
                & p {
                    /* transform: translate(0, 0); */
                    opacity: 1;
                    transition: 0.5s ease-in-out;
                }
            }
        }
    }
}