/* Switch */
.ui-switch {
  @apply inline-flex;
}

.ui-switch__label {
  @apply inline-flex cursor-pointer items-center gap-2 text-gray-900;
}

.ui-switch--disabled .ui-switch__label,
.ui-switch--checked-disabled .ui-switch__label {
  @apply cursor-not-allowed;
}

.ui-switch__input {
  @apply sr-only;
}

.ui-switch__track {
  @apply relative inline-flex shrink-0 items-center rounded-full bg-gray-300 p-0.5 transition-colors;
}

.ui-switch__track--sm {
  @apply h-4.5 w-8;
}

.ui-switch__track--md {
  @apply h-5.5 w-10;
}

.ui-switch__track--lg {
  @apply h-6.5 w-12;
}

.ui-switch__label:has(.ui-switch__input:checked:not(:disabled)) .ui-switch__track {
  @apply bg-indigo-500;
}

.ui-switch__label:has(.ui-switch__input:disabled:not(:checked)) .ui-switch__track {
  @apply bg-gray-200;
}

.ui-switch__label:has(.ui-switch__input:checked:disabled) .ui-switch__track {
  @apply bg-indigo-300;
}

.ui-switch__label:has(.ui-switch__input:focus-visible) .ui-switch__track {
  @apply ring-2 ring-blue-500 ring-offset-2;
}

.ui-switch__thumb {
  @apply block rounded-full bg-white shadow transition-transform;
}

.ui-switch__thumb--sm {
  @apply size-3.5;
}

.ui-switch__thumb--md {
  @apply size-4.5;
}

.ui-switch__thumb--lg {
  @apply size-5.5;
}

.ui-switch__label:has(.ui-switch__input:checked) .ui-switch__track .ui-switch__thumb--sm {
  @apply translate-x-3.5;
}

.ui-switch__label:has(.ui-switch__input:checked) .ui-switch__track .ui-switch__thumb--md {
  @apply translate-x-4.5;
}

.ui-switch__label:has(.ui-switch__input:checked) .ui-switch__track .ui-switch__thumb--lg {
  @apply translate-x-5.5;
}

.ui-switch__label:has(.ui-switch__input:disabled) .ui-switch__track .ui-switch__thumb {
  @apply shadow-none;
}

.ui-switch__text--sm {
  @apply text-sm font-normal leading-5;
}

.ui-switch__text--md {
  @apply text-base font-normal leading-6;
}

.ui-switch__text--lg {
  @apply text-lg font-normal leading-7;
}

/* 左のラベルはスイッチの名前。Figma の会話ドロワーに合わせて間隔 4px、色は gray-600 のまま。 */
.ui-switch__label:has(.ui-switch__text--start) {
  @apply gap-1;
}

.ui-switch__text--start {
  @apply text-gray-600;
}

/* 右のラベルは ON/OFF を表す語。Figma の設定画面に合わせて OFF は gray-400、ON は indigo-500。 */
.ui-switch__text--end {
  @apply text-gray-400;
}

.ui-switch__label:has(.ui-switch__input:checked:not(:disabled)) .ui-switch__text--end {
  @apply text-indigo-500;
}

/* ON / OFF で文言を変えるときは 2 つ描いておき、見せるほうをここで選ぶ。サーバーの応答を
   待たずに入れ替えるため。 */
.ui-switch__label:has(.ui-switch__input:checked) .ui-switch__text--off,
.ui-switch__label:not(:has(.ui-switch__input:checked)) .ui-switch__text--on {
  @apply hidden;
}

.ui-switch--disabled .ui-switch__text,
.ui-switch--checked-disabled .ui-switch__text {
  @apply text-gray-400;
}