/*
    material design switch (CSS ONLY)
    A PEN BY Henry Arneson
    https://codepen.io/henranator/pen/QEVybm

    Modified for dark theme and compiled to pure css.
 */

.md-switch-container {
    height: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.md-switch-container .md-transition {
    transition: all 100ms linear;
}
.md-switch-container .md-switch-track {
    width: 34px;
    height: 14px;
    border-radius: 34px;
    background: var(--ts-widget-off-color-container, #808080);
    transition: all 100ms linear;
}
.md-switch-container .md-switch-handle {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    border-radius: 100%;
    background: var(--ts-widget-off-color, #c0c0c0);
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    transition: all 100ms linear;
}
.md-switch-container .md-switch-label {
    margin-left: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}
.md-switch-container.checked .md-switch-track {
    background: var(--ts-widget-primary-color-container, #2f2f2f);
}
.md-switch-container.checked .md-switch-handle {
    left: 14px;
    background: var(--ts-widget-primary-color, #337ab7);
}