/* src/switch/src/Switch.css */
.o-ui-switch {
  --o-ui-switch-background-hover: var(--hop-neutral-surface-hover);
  --o-ui-switch-border-hover: var(--hop-neutral-border-hover);
  --o-ui-switch-dot-background-hover: var(--hop-neutral-icon-hover);
  --o-ui-switch-background-focus: var(--hop-neutral-surface-hover);
  --o-ui-switch-border-focus: var(--hop-neutral-border-hover);
  --o-ui-switch-dot-background-focus: var(--hop-neutral-icon-hover);
  --o-ui-switch-height: 1.5rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  max-width: 100%;
  width: max-content;
  height: max-content;
  color: var(--hop-neutral-text);
}
.o-ui-switch-control {
  display: inline-block;
  background-color: var(--hop-neutral-surface);
  border: 0.0625rem solid var(--hop-neutral-border);
  border-radius: var(--hop-shape-pill);
  box-shadow: 0 0 0 0.12rem transparent, 0 0 0 0.219rem transparent;
  position: relative;
  flex-shrink: 0;
  transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
}
.o-ui-switch-control::before {
  --o-ui-switch-control-before-transform-translate-value: var(--hop-space-inline-xs);
  content: "";
  display: inline-block;
  background-color: var(--hop-neutral-icon);
  border-radius: var(--hop-shape-circle);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(var(--o-ui-switch-control-before-transform-translate-value), -50%);
  transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
}
.o-ui-switch-label {
  margin-left: var(--hop-space-inline-sm);
}
.o-ui-switch-reverse .o-ui-switch-label {
  margin-left: 0;
  margin-right: var(--hop-space-inline-sm);
}
.o-ui-switch-icon {
  margin-left: var(--hop-space-inline-xs);
}
.o-ui-switch-reverse .o-ui-switch-icon {
  margin-left: 0;
  margin-right: var(--hop-space-inline-xs);
}
.o-ui-switch-reverse {
  flex-direction: row-reverse;
}
.o-ui-switch:not(.o-ui-switch-disabled):hover .o-ui-switch-control,
.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control {
  background-color: var(--o-ui-switch-background-hover);
  border-color: var(--o-ui-switch-border-hover);
}
.o-ui-switch:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
  background-color: var(--o-ui-switch-dot-background-hover);
}
.o-ui-switch input[type=checkbox]:focus-visible + .o-ui-switch-control,
.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
  background-color: var(--o-ui-switch-background-focus);
  border-color: var(--o-ui-switch-border-focus);
  box-shadow: 0 0 0 0.125rem var(--hop-neutral-surface), 0 0 0 0.25rem var(--hop-primary-border-focus);
}
.o-ui-switch input[type=checkbox]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
  background-color: var(--o-ui-switch-dot-background-focus);
}
.o-ui-switch-checked .o-ui-switch-control,
.o-ui-switch-checked:not(.o-ui-switch-disabled):hover .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control,
.o-ui-switch-checked input[type=checkbox]:focus-visible + .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
  background-color: var(--hop-neutral-surface-selected);
  border-color: var(--hop-neutral-border-selected);
}
.o-ui-switch-checked .o-ui-switch-control::before {
  transform: translate(calc(3rem / 2 + var(--o-ui-switch-control-before-transform-translate-value)), -50%);
}
.o-ui-switch-checked .o-ui-switch-control::before,
.o-ui-switch-checked:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control::before,
.o-ui-switch-checked input[type=checkbox]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
  background-color: var(--hop-neutral-icon-selected);
}
.o-ui-switch-disabled {
  cursor: not-allowed;
}
.o-ui-switch-disabled .o-ui-switch-control {
  background-color: var(--hop-neutral-surface-disabled);
  border-color: var(--hop-neutral-border-disabled);
}
.o-ui-switch-disabled .o-ui-switch-control::before {
  background-color: var(--hop-neutral-icon-disabled);
}
.o-ui-switch-sm {
  --o-ui-switch-height: 1rem;
}
.o-ui-switch-sm .o-ui-switch-control {
  width: 2rem;
  height: var(--o-ui-switch-height);
}
.o-ui-switch-sm .o-ui-switch-control::before {
  --o-ui-switch-control-before-transform-translate-value: calc(var(--hop-space-inline-xs) / 2);
  width: 0.75rem;
  height: 0.75rem;
  transform: translate(var(--o-ui-switch-control-before-transform-translate-value), -50%);
}
.o-ui-switch-sm.o-ui-switch-checked .o-ui-switch-control::before {
  transform: translate(calc(2rem - 0.75rem - var(--o-ui-switch-control-before-transform-translate-value)), -50%);
}
.o-ui-switch-sm .o-ui-switch-label,
.o-ui-switch-sm .o-ui-switch-counter {
  margin-top: calc((var(--o-ui-switch-height) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
}
.o-ui-switch-md .o-ui-switch-control {
  width: 3rem;
  height: var(--o-ui-switch-height);
}
.o-ui-switch-md .o-ui-switch-control::before {
  width: 1rem;
  height: 1rem;
}
.o-ui-switch-md.o-ui-switch-checked .o-ui-switch-control::before {
  transform: translate(calc(3rem - 1rem - var(--o-ui-switch-control-before-transform-translate-value)), -50%);
}
.o-ui-switch-md .o-ui-switch-label,
.o-ui-switch-md .o-ui-switch-counter {
  margin-top: calc((var(--o-ui-switch-height) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
}