[data-switch-root].switch{--sw-checked-bg: var(--null-button-bg);--sw-checked-bg-hover: var(--null-button-bg-hover);background:#c6c6c6;border:none;box-sizing:border-box;position:relative;cursor:pointer;display:flex;align-items:center;transition:.1s background-color ease-out}[data-switch-root].switch:focus,[data-switch-root].switch:focus-visible{outline:none}[data-switch-root].switch:hover:not(:disabled){background:#dcdcdc}[data-switch-root].switch[data-state=checked]{background:var(--sw-checked-bg)}[data-switch-root].switch[data-state=checked]:hover:not(:disabled){background:var(--sw-checked-bg-hover)}[data-switch-root].switch:disabled{box-shadow:none;cursor:not-allowed;opacity:.5}[data-switch-root].switch.full{width:100%}[data-switch-root].switch.wind{--sw-checked-bg: var(--wind-button-bg);--sw-checked-bg-hover: var(--wind-button-bg-hover)}[data-switch-root].switch.fire{--sw-checked-bg: var(--fire-button-bg);--sw-checked-bg-hover: var(--fire-button-bg-hover)}[data-switch-root].switch.water{--sw-checked-bg: var(--water-button-bg);--sw-checked-bg-hover: var(--water-button-bg-hover)}[data-switch-root].switch.earth{--sw-checked-bg: var(--earth-button-bg);--sw-checked-bg-hover: var(--earth-button-bg-hover)}[data-switch-root].switch.dark{--sw-checked-bg: var(--dark-button-bg);--sw-checked-bg-hover: var(--dark-button-bg-hover)}[data-switch-root].switch.light{--sw-checked-bg: var(--light-button-bg);--sw-checked-bg-hover: var(--light-button-bg-hover)}[data-switch-root].switch:disabled .thumb{background:#e9e9e9;cursor:not-allowed}[data-switch-root].switch.small{border-radius:11px;padding:0 3px;width:40px;height:22px}[data-switch-root].switch.small .thumb{height:16px;width:16px;border-radius:50%}[data-switch-root].switch.small .thumb[data-state=checked]{transform:translate(18px)}[data-switch-root].switch.medium{border-radius:13px;padding:0 3px;width:48px;height:26px}[data-switch-root].switch.medium .thumb{height:20px;width:20px;border-radius:50%}[data-switch-root].switch.medium .thumb[data-state=checked]{transform:translate(22px)}[data-switch-root].switch.large{border-radius:15px;padding:0 3px;width:56px;height:30px}[data-switch-root].switch.large .thumb{height:24px;width:24px;border-radius:50%}[data-switch-root].switch.large .thumb[data-state=checked]{transform:translate(26px)}[data-switch-root] .thumb{background:#fff;display:block;flex-shrink:0;transition:.1s transform ease-out;transform:translate(0);cursor:pointer;box-shadow:0 1px 3px #0003}[data-switch-root] .thumb[data-state=checked]{background:#fff}