:root {
    --c-active: #275EFE;
    --c-active-inner: #FFFFFF;
    --c-default: #D2D6E9;
    --c-default-dark: #C7CBDF;
    --c-black: #1B1B22;
}

.switch {
    display: table;
    border-radius: var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px);
    position: relative;
    --input-width: 38px;
}

.switch input {
    appearance: none;
    outline: none;
    border: none;
    background: var(--input-background, none);
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    width: var(--input-width, 24px);
    height: var(--input-height, 24px);
    --input-background: var(--c-default);
}

.switch input:checked {
    --input-background: var(--c-active);
}

.switch svg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
    fill: var(--c-active-inner);
    transform: scale(1.01) translateZ(0);
}

.switch input:checked + svg {
    --default-s: 0;
    --default-x: 8px;
    --dot-s: 1;
    --dot-x: 0px;
}

.switch input + svg {
    --input-background: var(--c-default);
    --default-s: 1;
    --default-x: 0px;
    --dot-s: 0;
    --dot-x: -8px;
}

.switch .default {
    transform-origin: 12px 12px;
    transform: translateX(var(--default-x)) scale(var(--default-s)) translateZ(0);
}

.switch .dot {
    transform-origin: 26px 12px;
    transform: translateX(var(--dot-x)) scale(var(--dot-s)) translateZ(0);
}