.cb-accordion {
    .header {
        margin-block-end: 1rem;
    }

    .accordion {
        .accordion-item {
            border: none;

            &:not(:last-of-type) {
                margin-bottom: 0.75rem;
                @media (min-width: 992px) {
                    margin-bottom: 1.25rem;
                }
            }

            .accordion-header {
                .accordion-button {
                    position: relative;
                    display: flex;
                    padding: 0.75rem 3.25rem 0.75rem 1rem;
                    @media (min-width: 992px) {
                        padding: 1.25rem 4.5rem 1.25rem 1.75rem;
                    }
                    font-size: var(--h5-fontsize);
                    font-weight: 600;
                    text-decoration: none;
                    border-radius: var(--border-radius);
                    color: var(--color-dark);
                    background-color: var(--color-gray-000);
                    transition: background-color .25s ease-in-out;

                    &:after {
                        content: "";
                        display: block;
                        width: 18px;
                        height: 18px;
                        background: currentColor;
                        pointer-events: none;
                        position: absolute;
                        right: 0.75rem;
                        @media (min-width: 992px) {
                            right: 1.75rem;
                        }
                        top: 50%;
                        transform: translate(-10px, -50%) rotate(0deg);
                        transform-origin: center;
                        transition: transform .25s ease-in-out;

                        mask-image: url('/typo3conf/ext/configsit/Resources/Public/Icons/arrow-down.svg');
                        mask-position: center;
                        mask-repeat: no-repeat;
                        mask-size: contain; 
                    }

                    &:hover, &:active, &:focus, &:focus-within {
                        background-color: var(--color-gray-100);
                    }
                    
                    &:hover, &:active, &:focus {
                        box-shadow: none;
                    }

                    &:not(.collapsed) {
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                        background-color: var(--color-gray-100);
                        box-shadow: none;

                        &:after {
                            transform: translate(-10px, -50%) rotate(180deg);
                        }
                    }

                    &.accordion-link {
                        &::after {
                            mask-image: url('/typo3conf/ext/configsit/Resources/Public/Icons/arrow-right.svg');
                            transform: translate(-10px, -50%);
                        }

                        &:hover, &:active, &:focus, &:focus-within {
                            &:after {
                                transform: translate(0, -50%);
                            }
                        }
                    }

                    &:focus-visible {
                        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--color-gray-200-opacity-90);
                        box-shadow: var(--bs-accordion-btn-focus-box-shadow);
                    }

                }
            }

            .accordion-body {
                background-color: var(--color-gray-100);
                border-bottom-left-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
                padding: 0.25rem 1rem 1.25rem 1rem;
                @media (min-width: 992px) {
                    padding: 0.75rem 1.75rem 1.75rem 1.75rem;
                }

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



.frame-layout-4, .frame-layout-5, .frame-layout-6, .frame-layout-7, .frame-layout-8 {
    &.cb-accordion {
        .accordion {
            .accordion-item {
                .accordion-header {
                    .accordion-button {                    
                        background-color: var(--color-white);
                        &:hover, &:active, &:focus, &:focus-within {
                            background-color: var(--color-gray-100);
                        }
                        &:not(.collapsed) {
                            background-color: var(--color-gray-100);
                        }
                    }
                }
                .accordion-body {
                    background-color: var(--color-gray-100);
                }
            }
        }
    }
}

.frame-layout-10 {
    &.cb-accordion {
        .accordion {
            .accordion-item {
                .accordion-header {
                    .accordion-button {                    
                        background-color: var(--color-white);
                        &:hover, &:active, &:focus, &:focus-within {
                            background-color: var(--color-gray-000);
                        }
                        &:not(.collapsed) {
                            background-color: var(--color-gray-000);
                        }
                    }
                }
                .accordion-body {
                    background-color: var(--color-gray-000);
                }
            }
        }
    }
}