.switch {
    display     : inline-flex;
    user-select : none;

    .switch__track {
        border           : 1px solid;
        background-color : var(--background);
        color            : var(--border_color);
        width            : 55px;
        height           : 24px;
        box-sizing       : border-box;
        border-radius    : 24px;
        position         : relative;
        transition       : color 0.3s;
        cursor           : pointer;
        display          : inline-flex;

        .switch__thumb {
            position         : absolute;
            width            : 14px;
            height           : 14px;
            top              : 4px;
            left             : 5px;
            background-color : currentColor;
            display          : inline-block;
            border-radius    : 50%;
            transition       : left .3s;
        }

        .switch__text {
            font-size      : 11px;
            line-height    : 14px;
            font-weight    : 600;
            position       : absolute;
            top            : 4px;
            right          : 9px;
            text-transform : uppercase;
        }
    }

    .switch__field {
        display : none;

        &:checked + .switch__track {
            color : var(--green);

            .switch__thumb {
                left : calc(100% - 19px);
            }

            .switch__text {
                right : auto;
                left  : 9px;
            }
        }
    }

}