.Switch {
    position: relative;
    display: inline-block;
    width: var(--spacing-400);
    height: var(--spacing-100);
}

.Switch input {
    display: none;
}

.Switch div {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray400);
    transition: all 100ms;
    border-radius: 9999px;
}

.Switch div:before {
    position: absolute;
    content: "";
    height: var(--spacing-200);
    width: var(--spacing-200);
    left: 0;
    bottom: -4px;
    background-color: var(--gray500);
    transition: all 100ms ease;
    border-radius: 50%;
    box-shadow: var(--shadow-100);
}

.Switch input:checked + div {
    background-color: var(--blue400);
}

.Switch input:checked + div:before {
    transform: translateX(var(--spacing-200));
    background-color: var(--blue500);
}

/* Disabled state */

.Switch.is-disabled div,
.Switch.is-disabled input:checked + div {
    cursor: not-allowed;
    background-color: var(--gray300);
}

.Switch.is-disabled div:before,
.Switch.is-disabled input:checked + div:before {
    background-color: var(--gray400);
    box-shadow: none;
}