.option-btn {
    position: relative;
}
.option-btn__label {
    cursor: pointer;
    background: transparent;
    border-color: transparent;
}
.option-btn__label:hover,
.option-btn__control:checked ~ .option-btn__label {
    border-color: #0000be;
    background: #0000be;
    color: #fff;
}
.option-btn__control {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}


.option-switch {
    position: relative;
}
.option-switch__label {
    width: 50px;
    height: 30px;
    cursor: pointer;
    background: #bed0ff;
    border-radius: 50px;
    transition: background 0.2s ease;
    display: block;
}
.option-switch__label:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
    background: #fff;
    border-radius: 50%;
}
.option-switch__control:checked ~ .option-switch__label {
    background: #eb008c;
}
.option-switch__control:checked ~ .option-switch__label:before {
    transform: translate(20px,0);
}
.option-switch__control {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}