/* From Uiverse.io by xbeat_5120 */
.uiverse-pixel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    font-family: "Courier New", monospace;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0.125em 0.125em 0 #000;
    user-select: none;
}

.uiverse-pixel-toggle-input {
    appearance: none;
    width: 3.5em;
    height: 1em;
    background: #00cc66;
    border: none;
    image-rendering: pixelated;
    position: relative;
    cursor: pointer;
    box-shadow:
        0 0 0 0.15em #000,
        0 0 0 0.3em #fff,
        0 0 0 0.45em #000,
        0 0.4em 0 0 #d1451e,
        0 0.4em 0 0.15em #000;
    transition: background 0.2s steps(2);
}

.uiverse-pixel-toggle-input::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    width: 1.3em;
    height: 0.5em;
    background: #000;
    box-shadow: inset 0 0 0.125em #fff;
    transition: transform 0.2s steps(4);
}

.uiverse-pixel-toggle-input:checked {
    background: #00e5ff;
}

.uiverse-pixel-toggle-input:checked::before {
    transform: translateX(1.5em);
}

.uiverse-pixel-toggle-input:focus-visible {
    outline: 2px dashed #fff;
    outline-offset: 0.2em;
}