.switch-button {
background: #f5f7fa;
border-radius: 30px;
overflow: hidden;
width: 360px;
text-align: center;
font-size: 15px;
color: #8C9BA5;
position: relative;
padding-right: 220px;
position: relative;
margin: auto;
}
.switch-button:before {
content: "Bookings with Visits";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 220px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
color: #8C9BA5;
}
.second-selected:before {
color: white;
}
.switch-button-checkbox {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
transform: translateX(130px);
width: 300px;
transition: transform 300ms linear;
transition: width 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
position: relative;
padding: 15px 0;
display: block;
user-select: none;
pointer-events: none;
}
.switch-button-checkbox + .switch-button-label:before {
content: "";
background: #57b4f2;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 30px;
transform: translateX(0);
transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
position: relative;
color: white;
}
.second-selected .switch-button-label-span {
color: #8C9BA5 !important;
}
@media only screen and (max-width: 767px) {
.switch-button {
width: 325px;
padding-right: 190px;
}
.switch-button:before {
width: 200px;
}
}