.button {
    &.switch {
        --default: #F0F0F0;
        --active: #3366FF;
        --height: 39px;
        height: var(--height);
        cursor: pointer;
        display: inline-block;
        background-color: var(--default);
        border-radius: var(--height);
        position: relative;
        user-select:none;

        input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;

            &:checked {
                ~.switch-label {
                    span {
                        transition: ease all 0.4s;

                        &:first-of-type {
                            color: #fff;
                            font-weight:500;
                        }

                        &:last-of-type {
                            color: #999999;
                            font-weight:400;
                        }
                    }

                    &:before {
                        transform: translateX(0%);
                        transition:ease all 0.4s;
                    }
                }
            }
        }

        .switch-label {
            height: var(--height);
            display: flex;
            align-items: center;
            gap:23px;
            font-weight: 400;
            line-height: 1.193em;

            span {
                z-index: 1;
                transition: ease all 0.4s;

                &:first-of-type {
                    padding-left:19px;
                    color: #999999;
                    font-weight:400;
                }

                &:last-of-type {
                    padding-right:12px;
                    color: #fff;
                    font-weight:500;
                }
            }

            &:before {
                content: '';
                position: absolute;
                z-index: 0;
                width: 98px;
                height: var(--height);
                background-color:var(--active);
                border-radius: var(--height);
                transform: translateX(calc(100% - 9px));
                transition:ease all 0.4s;
                
            }
        }
    }
}