.ads-Toggle {
  @apply inline-flex
    items-center
    rounded-full
    relative
    cursor-pointer;

  gap: theme("margin.2");
}

.ads-Toggle:focus {
  @apply outline-none;
}

.ads-Toggle--left {
  @apply flex-row-reverse;
}

.ads-Toggle-track {
  @apply block
    w-9
    rounded-full
    cursor-pointer;
}

.ads-Toggle-thumb {
  @apply block
    border
    rounded-full
    relative
    h-5
    w-5
    transition
    ease-out
    duration-150;
}

.ads-Toggle-label {
  @apply text-bodySm;
}

/* On */
.ads-Toggle.isOn .ads-Toggle-track {
  @apply bg-brandGreen-400;

  box-shadow: inset 0 0 0 1px theme("colors.brandGreen.400");
}

.ads-Toggle.isOn:focus .ads-Toggle-track {
  box-shadow: inset 0 0 0 1px theme("colors.brandGreen.400"),
    theme("boxShadow.focus");
}

.ads-Toggle.isOn .ads-Toggle-thumb {
  @apply bg-white
    border-brandGreen-400;

  transform: translateX(theme("width.4"));
}

/* Off */
.ads-Toggle.isOff .ads-Toggle-track {
  @apply bg-gray-500;

  box-shadow: inset 0 0 0 1px theme("colors.gray.500");
}

.ads-Toggle.isOff:focus .ads-Toggle-track {
  box-shadow: inset 0 0 0 1px theme("colors.gray.500"), theme("boxShadow.focus");
}

.ads-Toggle.isOff .ads-Toggle-thumb {
  @apply bg-white
  border-gray-500;
}

.ads-Toggle:disabled .ads-Toggle-track {
  @apply opacity-50
  cursor-not-allowed;
}