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

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

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

.ads-Toggle-thumb {
  @apply block
    border
    rounded-full
    relative
    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 .ads-Toggle-thumb {
  @apply bg-white
    border-brandGreen-400;
}

/* 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 .ads-Toggle-thumb {
  @apply bg-white
  border-gray-500;
}

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