button {
    all: unset;
}

.SwitchRoot {
    background-color: var(--background-neutral-hover);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: 250ms ease 0s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    // border: 1px solid var(--border-neutral);
    &:hover {
        background-color: var(--background-neutral-active);
    }
    &-large {
        width: 44px;
        height: var(--size-300);
        .SwitchThumb {
            width: 16px;
            height: 16px;
            transform: translateX(4px);
            &[data-state="checked"] {
                transform: translateX(24px);
            }
        }
        &:hover {
            .SwitchThumb {
                transition: 250ms ease 0s;
                &:not([data-disabled]) {
                    &:not([data-state="checked"]) {
                        width: 20px;
                        height: 20px;
                        transform: translateX(2px);
                    }
                    &[data-state="checked"] {
                        width: 20px;
                        height: 20px;
                        transform: translateX(22px);
                    }
                }
            }
        }
    }
    &-small {
        width: 32px;
        height: 18px;
        .SwitchThumb {
            width: 12px;
            height: 12px;
            transform: translateX(4px);
            &[data-state="checked"] {
                transform: translateX(16px);
            }
        }
        &:hover {
            .SwitchThumb {
                transition: 250ms ease 0s;
                &:not([data-disabled]) {
                    &:not([data-state="checked"]) {
                        width: 14px;
                        height: 14px;
                        transform: translateX(2px);
                    }
                    &[data-state="checked"] {
                        width: 14px;
                        height: 14px;
                        transform: translateX(16px);
                    }
                }
            }
        }
    }

    &[data-disabled] {
        background-color: var(--background-neutral-disabled);
        // border-color: var(--border-neutral-subtle);
        &[data-state="checked"] {
            background-color: var(--background-neutral-disabled);
        }
        .SwitchThumb {
            background-color: var(--foreground-neutral-disabled);
        }
        & + * {
            color: var(--foreground-neutral-disabled);
        }
    }
    &[data-state="checked"] {
        background-color: var(--brand-2);
    }
}
.SwitchRoot:focus {
    box-shadow: var(--focus);
    outline: none;
}

.SwitchThumb {
    display: block;
    background-color: var(--background-neutral-container);
    border-radius: 9999px;
    transition: transform 100ms;
    transform-origin: center;
    transition: 250ms ease 0s;
    will-change: transform;
}

.Label {
    font-size: 16px;
    line-height: 1;
    color: var(--foreground-neutral);
    cursor: pointer;
}
.darkmode {
    .SwitchRoot {
        background-color: var(--gray-400);
        &:hover {
            background-color: var(--gray-300);
        }
        &[data-disabled] {
            background-color: var(--black-200);
        }
        &[data-state="checked"] {
            background-color: var(--brand-2);
        }
    }
}