.toggle {
    --width: 3.5rem;
    --height: 1.5rem;
    --toggle-border-radius: calc(var(--height) / 2);
    display: inline-block;
    cursor: pointer;
}

.toggle__input {
    display: none;
}

.toggle__fill {
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--toggle-border-radius);
    background: var(--unselected-toggle-color);
    transition: background 0.2s;
}

.toggle__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: var(--height);
    width: var(--height);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border-radius: var(--toggle-border-radius);
    transition: transform 0.2s;
}

.toggle__input:checked ~ .toggle__fill {
    background: var(--selected-toggle-color);
}

.toggle__input:checked ~ .toggle__fill::after {
    transform: translateX(calc(var(--width) - var(--height)));
}

.ui.toggle.checkbox input:checked~label:before {
    background-color: var(--selected-toggle-color);
}

.ui.toggle.checkbox label:before{
    background: none !important;
    background-color: var(--unselected-toggle-color);
}