.switch-lang-my{
    position: relative;
    width: 50px;
    height: 20px;
    border-radius: 10px;
    margin-left: 0.25rem;
}
.switch-lang-my input{
    appearance: none;
    width: 50px;
    height: 20px;
    border-radius: 10px;
    background: rgba(31, 41, 55, 0.8);
    outline: none;
    border: 1px solid rgba(79, 70, 229, 0.3);
    backdrop-filter: blur(10px);
}

.switch-lang-my input::before,
.switch-lang-my input::after{
    z-index: 2;
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    font-weight: bolder;
}
.switch-lang-my input::before{
    content: 'RU';
    left: 4px;
    color: var(--primary);
    font-size: 0.6rem;
}
.switch-lang-my input::after{
    content: 'EN';
    right: 4px;
    color: var(--primary-light);
    font-size: 0.6rem;
}
.switch-lang-my input:checked {
    background: var(--primary-light);
    
}
.switch-lang-my label{
    z-index: 1;
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 8px;
}
.switch-lang-my input{
    transition: 0.25s;
}
.switch-lang-my input:checked::after,
.switch-lang-my input:checked::before{
    color: #fff;
    transition: color 0.5s;
}

.switch-lang-my input:checked + label{
    left: 2px;
    right: 26px;
    background: var(--primary);
    transition: left 0.5s, right 0.4s 0.2s;
}

.switch-lang-my input:not(:checked){
    background: #1E1E1E;
    transition: background 0.4s;  
}
.switch-lang-my input:not(:checked)::before{
    background: #fff;
    transition: color 0.5s, left 0.4s 0.2s, right 0.5s;
}

.switch-lang-my input:not(:checked)::after{
    background: 1e1E1E;
    transition: color 0.5s 0.2s;
}
.switch-lang-my input:not(:checked) + label{
    left: 26px;
    right: 2px;
    background: var(--accent);
    transition: left 0.4s 0.2s, right 0.5s, background 0.35s;
}