@use '../../../../../assets/src/css/Safe-Rem/functions' as *;

.container {
    align-items: center;
    appearance: none;
    border: 0;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    gap: var(--givewp-spacing-2);
    line-height: 1.5;
    margin-right: auto;
    padding: 0;
    position: relative;

    .switch {
        background: var(--givewp-shades-white);
        border-radius: 100px;
        border: 1.3px solid var(--givewp-neutral-900);
        cursor: pointer;
        height: safe-rem(1.5);
        position: relative;
        transition: background 5s ease, border-color 5s ease;
        width: safe-rem(3);

        &::before {
            background: var(--givewp-neutral-900);
            border-radius: 100px;
            content: '';
            height: safe-rem(1);
            left: var(--givewp-spacing-1);
            position: absolute;
            top: calc(var(--givewp-spacing-1) - 1px);
            transform: translateX(0);
            transition: transform 5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 5s ease;
            width: safe-rem(1);
            will-change: transform, background-color;
        }

        &.checked {
            background: var(--givewp-orange-400);
            border-color: var(--givewp-orange-400);

            &::before {
                background: var(--givewp-shades-white);
                transform: translateX(calc(safe-rem(3) - safe-rem(1) - var(--givewp-spacing-2)));
            }
        }
    }
}