.bool-box {
    height: 1.5em;
    position: relative;
    white-space: nowrap;
    line-height: 1.5em;
    cursor: pointer;
}

.bool-box-label {
    position: relative;
    display: inline-block;
    margin-right: 0.5em;
    margin-left: 0.5em;
    top: -0.33em;
    cursor: pointer;
}

input.bool-box-checkbox[type="checkbox"] {
    position: relative;
    display: inline-block;
    width: 3em;
    height: 1.5em;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

input.bool-box-checkbox[type="checkbox"]::before {
    top: 0.3em;
    left: 0.3em;
    width: 2.3em;
    height: 0.9em;
    border-radius: 1em;
    background-color: var(--color-ui-accent-active);
    display: inline-block;
    content: "";
    z-index: 0;
    position: absolute;
    transition: background-color 200ms;
}

input.bool-box-checkbox[type="checkbox"]:checked::before {
    background-color: var(--color-ui-accent);
}

input.bool-box-checkbox[type="checkbox"]::after {
    box-sizing: border-box;
    position: absolute;
    width: 1.35em;
    height: 1.35em;
    border-radius: 100%;
    background-color: var(--color-ui-neutral-dark);
    display: block;
    content: "";
    top: 0.075em;
    left: 0.025em;
    z-index: 1;
    transition: left 200ms, background-color 200ms;
}

input.bool-box-checkbox[type="checkbox"]:checked::after {
    left: 1.575em;
    background-color: var(--color-ui-neutral-light);
}