.form-input-toggle {
    --width: 2.5rem;
    --height: 1.5rem;

    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    /*margin: 10px;*/

    .form-input-toggle__input {
        display: none;
    }

    .form-input-toggle__label {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--width);
        height: var(--height);
        background-color: var(--clr-gray-200);
        border-radius: 100vw;
        cursor: pointer;
        transition: background-color var(--transition-duration);

        &::before {
            content: "";
            position: absolute;
            width: 1.25rem;
            aspect-ratio: 1/1;
            border-radius: 100vw;
            top: 50%;
            left: 0;
            transform: translate(0.125rem, -50%);
            background-color: var(--clr-gray-0);
            box-shadow: 0 0.125rem 0.25rem 0 color-mix(in oklab, var(--clr-gray-950), transparent 70%);
            transition: transform var(--transition-duration);
        }
    }

    .form-input-toggle__input:checked {
        & + .form-input-toggle__label {
            background-color: var(--clr-primary);

            &::before {
                transform: translate(calc(100% - 0.125rem), -50%);
            }
        }
    }
}