.rkit-toggle-slider {
cursor: pointer;
text-indent: -9999px;
width: 70px;
height: 35px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}
.rkit-toggle-slider::after {
content: "";
position: absolute;
top: 50%;
left: 6px;
width: 25px;
height: 25px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
transform: translateY(-50%);
}
.rkit-toggle-input.active + .rkit-toggle-slider::after {
left: calc(100% - 6px);
transform: translateX(-100%) translateY(-50%);
}
.rkit-toggle-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.rkit-toggle-slider:active::after {
width: 50% !important;
}
.rkit-toggle-content {
display: none;
}
.rkit-toggle-content.active {
display: block;
animation: fade 0.5s ease;
}
.rkit-toggle-title {
margin: 0;
}
.rkit-toggle-wrapper {
display: flex;
flex-direction: row;
gap: 1rem;
padding: 20px;
align-items: center;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}