/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 5px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Increases area that accepts mouse clicks */
.invisible-background {
    cursor: pointer;
    position: absolute;
    background: transparent;
    top: -5px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 16px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-slider-background);
    transition: 0.25s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 0;
    bottom: -6px;
    background-color: var(--theme-slider-thumb-background);
    transition: 0.25s;
    filter: brightness(0.5);
}

input:checked + .slider {
    background-color: var(--theme-accent-color);
}

input:checked + .slider:before {
    transform: translateX(16px);
    filter: brightness(1);
}

.slider {
    border-radius: 5px;
}

.slider:before {
    border-radius: 50%;
}

.inactive-opacity {
    opacity: 0.4;
}

.full-opacity {
    opacity: 1;
}
