@layer clickui {/* The wrapper class is applied alongside FormRoot's styled-components class.
   The .wrapper.wrapper double-class boost matches the specificity behavior of
   the original `styled(FormRoot)` chain so these overrides reliably beat
   FormRoot's `align-items: flex-start` regardless of stylesheet insertion
   order between CSS Modules and the runtime-injected styled-components. */
.wrapper__kudO9.wrapper__kudO9 {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
     keyword on `max-width` is widely supported on evergreen browsers; the original
     styled-components rule used the same value. */
  max-width: fit-content;
  align-items: center;
}

.switch__hgdMu {
  position: relative;
  width: var(--click-switch-size-width);
  height: var(--click-switch-size-height);
  padding: 0;
  border: 1px solid var(--click-switch-color-stroke-default);
  border-radius: var(--click-switch-radii-all);
  background-color: var(--click-switch-color-background-default);
  cursor: pointer;
}

.switch__hgdMu[data-state='checked'] {
  border: 1px solid var(--click-switch-color-stroke-active);
  background-color: var(--click-switch-color-background-active);
}

/* stylelint-disable no-descending-specificity -- disabled state intentionally
   defined after the checked state to mirror the original `getRootVars`
   priority, where `disabled` is evaluated before `checked` so a disabled
   switch always shows the disabled colors regardless of checked. */
.switch__hgdMu[data-disabled],
.switch__hgdMu[data-disabled][data-state='checked'] {
  border: 1px solid var(--click-switch-color-stroke-disabled);
  background-color: var(--click-switch-color-background-disabled);
  cursor: not-allowed;
}
/* stylelint-enable no-descending-specificity */

.switch__thumb__cPlbD {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: var(--click-switch-radii-all);
  background-color: var(--click-switch-color-indicator-default);
  transition: transform 100ms;
  transform: translateX(2px);
  will-change: transform;
}

.switch__thumb__cPlbD[data-state='checked'] {
  background-color: var(--click-switch-color-indicator-active);
  transform: translateX(15px);
}

/* stylelint-disable no-descending-specificity -- disabled state intentionally
   defined after the checked state to mirror the original `getThumbVars`
   priority, where `disabled` is evaluated before `checked`. */
.switch__thumb__cPlbD[data-disabled],
.switch__thumb__cPlbD[data-disabled][data-state='checked'] {
  background-color: var(--click-switch-color-indicator-disabled);
}
/* stylelint-enable no-descending-specificity */
}