@import "../../css/colors.css";
@import "../../css/units.css";

$disabled-color: rgb(125, 125, 125);
$border-width: 1px;
$width: 3rem;
$height: 1.5rem;

$slider-width: calc($height - 4 * $border-width);
$slider-height: $slider-width;

.switch {
    width: $width;
    height: $height;
    border-radius: $height;
    border: solid $ui-black-transparent $border-width;
    display: inline-block;
    transition: background-color 0.3s;
    cursor: pointer;
}

.switch.true {
    background-color: $motion-primary;
}

.switch.false {
    background-color: #e6e6e6;
}

[theme='dark'] .switch.false {
    background-color: $ui-tertiary-dark;
}

.switch.disabled {
    background-color: #9c9c9c;
}

[theme='dark'] .switch.disabled {
    background-color: $motion-primary-dark;
}

.slider {
    width: $slider-width;
    min-height: $slider-height;
    border-radius: $slider-height;
    margin: calc(($height - $slider-height) / 2 - $border-width);
    transition: all 0.3s;
    border: solid $ui-black-transparent $border-width;
    background-color: $ui-white;
}

.slider.true {
    transform: translateX(calc($width - $height));
}

.slider.false {
    transform: translateX(0rem);
}

.slider.disabled {
    background-color: #d3d3d3;
}

.dummy-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}
