@use "../variable" as *;

.rbfb-top-level-wrapper {
    .rbfb-settings-field {
        &__collapse-button {
            .rbfb-icon {
                transition: transform 0.3s ease;
                transform: rotate(-180deg);
            }

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

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

    .rbfb-settings-field-disabled {
        position: relative;
        opacity: 0.5;

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
    }

    .rbfb-blink {
        animation: rbfb-blink 0.25s ease-in-out infinite alternate;
    }

    @keyframes rbfb-blink {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(1.05);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}
