/* Switch base styles */
.switch {
  @apply inline-flex items-center gap-3 no-highlight;

  /* Cursor */
  cursor: var(--cursor-interactive);

  /* Default tokens for switch control states */
  --switch-control-bg: var(--color-default);
  --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
  --switch-control-bg-pressed: var(--switch-control-bg-hover);
  --switch-control-bg-checked: var(--color-accent);
  --switch-control-bg-checked-hover: var(--color-accent-hover);

  /* Disabled state */
  &:disabled,
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;

    .switch__thumb {
      @apply bg-default-foreground/20;
    }
  }

  /* Disabled + Selected state */
  &:disabled[aria-checked="true"],
  &:disabled[data-selected="true"],
  &[data-disabled="true"][aria-checked="true"],
  &[data-disabled="true"][data-selected="true"],
  &[aria-disabled="true"][aria-checked="true"],
  &[aria-disabled="true"][data-selected="true"] {
    .switch__thumb {
      opacity: 0.4;
    }
  }
}

/* Size variants - default is medium */
.switch--sm {
  /* Small size modifier */
}

.switch--md {
  /* Medium size - no styles as this is the default */
}

.switch--lg {
  /* Large size modifier */
}

/* Switch control (track) */
.switch__control {
  /* Default size (medium) */
  @apply relative flex shrink-0 items-center overflow-hidden rounded-full;
  height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
  width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */

  background-color: var(--switch-control-bg);

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    background-color 250ms var(--ease-smooth),
    box-shadow 150ms var(--ease-out);
  @apply motion-reduce:transition-none;

  /* Focus states */
  .switch:focus-visible &,
  .switch[data-focus-visible="true"] & {
    @apply status-focused;
  }

  /* Hover states */
  .switch:hover &,
  .switch[data-hovered="true"] & {
    background-color: var(--switch-control-bg-hover);
  }

  /* Pressed states */
  .switch:active &,
  .switch[data-pressed="true"] & {
    background-color: var(--switch-control-bg-pressed);
    @apply motion-reduce:transform-none;
  }

  /* Checked states */
  .switch[aria-checked="true"] &,
  .switch[data-selected="true"] & {
    background-color: var(--switch-control-bg-checked);
  }

  /* Checked + Hover states */
  .switch[aria-checked="true"]:hover &,
  .switch[data-selected="true"]:hover &,
  .switch[aria-checked="true"][data-hovered="true"] &,
  .switch[data-selected="true"][data-hovered="true"] & {
    background-color: var(--switch-control-bg-checked-hover);
  }

  /* Checked + Pressed states */
  .switch[aria-checked="true"]:active &,
  .switch[data-selected="true"]:active &,
  .switch[aria-checked="true"][data-pressed="true"] &,
  .switch[data-selected="true"][data-pressed="true"] & {
    background-color: var(--switch-control-bg-checked-hover);
  }
}

/* Size-specific control dimensions */
.switch--sm .switch__control {
  height: 1rem; /* ~14px on desktop, ~16px on mobile */
  width: 2rem; /* ~32px on desktop, ~36px on mobile */
}

.switch--md .switch__control {
  /* No styles as this is the default size */
}

.switch--lg .switch__control {
  height: 1.5rem; /* ~21px on desktop, ~24px on mobile */
  width: 3rem; /* ~48px on desktop, ~56px on mobile */
}

/* Switch thumb */
.switch__thumb {
  /* Default size (medium) with margin-based positioning */
  @apply ms-0.5 flex origin-center rounded-full bg-white text-black shadow-field;
  height: 1rem; /* ~14px on desktop, ~16px on mobile */
  width: 1.375rem; /* ~19px on desktop, ~22px on mobile */

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    margin 300ms var(--ease-out-fluid),
    background-color 200ms var(--ease-out);
  @apply motion-reduce:transition-none;

  /* Selected/checked state - use margin instead of translate */
  .switch[aria-checked="true"] &,
  .switch[data-selected="true"] & {
    @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent;
    box-shadow:
      0px 0px 5px 0px rgb(0 0 0 / 0.02),
      0px 2px 10px 0px rgb(0 0 0 / 0.06),
      0px 0px 1px 0px rgb(0 0 0 / 0.3);
  }

  .switch:active &,
  .switch[data-pressed="true"] & {
  }
}

/* Size-specific thumb dimensions */
.switch--sm .switch__thumb {
  height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
  width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */

  /* Small selected state positioning */
  .switch[aria-checked="true"] &,
  .switch[data-selected="true"] & {
    @apply ms-[calc(100%-1.15625rem)];
  }
}

.switch--lg .switch__thumb {
  height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
  width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */

  /* Large selected state positioning */
  .switch[aria-checked="true"] &,
  .switch[data-selected="true"] & {
    @apply ms-[calc(100%-1.84375rem)];
  }
}

/* Switch thumb content container */
.switch__thumb > * {
  @apply flex size-full items-center justify-center;
}

/* Switch label */
.switch__label {
  @apply text-base font-medium text-foreground;
}

/* Switch content */
.switch__content {
  @apply flex flex-col gap-0;
}