@use "../variable" as *;

.rbfb-top-level-wrapper {
    .rbfb-switcher {
        display: inline-flex;
        align-items: center;

        &__toggle {
            position: relative;
            width: 3.3rem;
            height: 1.5rem;
            background-color: transparent;
            border: 1px solid $primary;
            border-radius: 9999px;
            transition:
                background-color 0.3s ease,
                border-color 0.3s ease;
            cursor: pointer;
        }

        &__toggle-thumb {
            position: absolute;
            top: 50%;
            left: 0.2rem;
            width: 1.6rem;
            height: 1.1rem;
            background-color: $primary;
            border-radius: 9999px;
            transform: translate(0, -50%);
            transition:
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.2s ease,
                border-radius 0.2s ease,
                background-color 0.3s ease;
        }

        &__toggle:active &__toggle-thumb {
            width: 1.9rem;
            border-radius: 9999px;
        }

        &__toggle--active:active &__toggle-thumb {
            width: 1.9rem;
            transform: translate(0.93rem, -50%);
        }

        &__toggle--active {
            background-color: $primary;

            .rbfb-switcher__toggle-thumb {
                transform: translate(1.23rem, -50%);
                background-color: $white;
            }
        }

        &__toggle--loading {
            background-color: rgba($primary);

            .rbfb-switcher__toggle-thumb {
                animation: rbfb-switcher-loading 1.1s ease-in-out infinite;
                background-color: $primary;
            }
        }

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

@keyframes rbfb-switcher-loading {
    0% {
        transform: translate(0.02rem, -50%);
        opacity: 0.6;
    }
    50% {
        transform: translate(1.23rem, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(0.02rem, -50%);
        opacity: 0.6;
    }
}
