/**
 * Checkbox
 */

/* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
@layer dx-components {
  .dx-checkbox--switch,
  .dx-checkbox {
    @apply border border-un-accent;
    &[aria-checked='true'],
    &[aria-checked='mixed'],
    &:checked {
      @apply bg-accent-bg accent-accent-bg border-accent-bg;
    }

    &:not([disabled]),
    &[disabled='false'] {
      &:hover {
        @apply bg-un-accent-hover accent-un-accent-hover;
        &[aria-checked='true'],
        &[aria-checked='mixed'],
        &:checked {
          @apply bg-accent-bg-hover accent-accent-bg-hover border-accent-bg-hover;
        }
      }
    }
  }

  .dx-checkbox {
    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-fg shrink-0 inline-grid place-items-center rounded-xs;
  }

  /* TODO(ZaymonFC): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
  /* NOTE: This isn't compatible with the Radix switch. */
  .dx-checkbox--switch {
    @apply inline-block appearance-none relative shrink-0 h-5 w-8;
    @apply shadow-inner transition-colors bg-un-accent;
    @apply cursor-pointer rounded-full;

    &::before {
      @apply w-3 h-3 mx-[0.1875rem] my-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
      content: '';
    }

    &[aria-checked='true'],
    &[aria-checked='mixed'],
    &:checked {
      background-image: none;
      &::before {
        @apply translate-x-[100%];
      }
    }
  }
}