@use "../variable" as *;

.rbfb-top-level-wrapper {
    .rbfb-accordion {
        background: $white;
        border: 1px solid $gray-200;

        &__header {
            padding: 1rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            background: transparent;
            border: 0;
            text-align: left;

            &-title {
                display: flex;
                align-items: center;
                flex: 1;
                min-width: 0;
                overflow: hidden;
            }

            &-icon {
                flex-shrink: 0;
                transition: transform 0.3s ease;
                transform: rotate(-90deg);

                &--open {
                    transform: rotate(0deg);
                }
            }
        }

        &__body {
            transition: max-height 0.3s ease;

            &-inner {
                position: relative;
                padding: 1rem;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 1rem;
                    right: 1rem;
                    height: 1px;
                    background-color: $gray-200;
                }
            }
        }

        &--single {
            margin-top: 0.5rem;
        }

        &--disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    }

    .rbfb-accordion-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
}
