.ds-switch_container {
    width: auto;
}
.ds-switch {
    visibility: hidden;
    position: absolute;
    margin-left: -9999px;
}
  
.ds-switch + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}

.ds-switch-shadow + label {
padding: 2px;
width: 41px;
height: 24px;
background-color: var(--gray200);
border-radius: 60px;
}
.ds-switch-shadow + label:before,
.ds-switch-shadow + label:after {
display: block;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
content: "";
}
.ds-switch-shadow + label:before {
right: 0px;
left: 0px;
background-color: var(--gray200);
border-radius: 60px;
transition: background 0.4s;
}
.ds-switch-shadow + label:after {
width: 16px;
height: 16px;
top: 3px;
right: 3px;
background-color: var(--gray00);
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.4s;
}
.ds-switch-shadow:checked + label:before {
background-color: var(--primaryColorMain);
}
.ds-switch-shadow:checked + label:after {
transform: translateX(22px);
}