@import "./product";
@import "./brand";

/* Doubling class to override .ads-Checkbox class */
.ads-Checkbox-Label.ads-Checkbox-Label {
  @apply inline-flex
    items-center;
}

.ads-Checkbox-LabelText {
  @apply ml-2 font-regular;
}

.ads-Checkbox-BoxWrapper {
  @apply relative w-4 h-4 flex-shrink-0;
}

.ads-Checkbox-Input {
  @apply absolute
         opacity-0;
  z-index: -1;
}

.ads-Checkbox-Box {
  @apply border
         border-solid
         w-full
         h-full
         rounded-sm;
}

/* Disabled */
.ads-Checkbox.is-disabled .ads-Checkbox-Label {
  @apply cursor-not-allowed;
}

/* Checked */
.ads-Checkbox-Check {
  @apply absolute
    inset-0
    flex
    items-center
    justify-center
    text-h5
    opacity-0
    duration-150
    pointer-events-none;

  transition-property: opacity, transform;
  transform: scale(0.5);
}

.ads-Checkbox-Check--checked {
  @apply opacity-100
    duration-150;

  transition-property: opacity, transform;
  transform: scale(1);
}

/* Focused */
.ads-Checkbox-Input:focus-visible + .ads-Checkbox-Box {
  @apply focus-visible;

  outline-offset: -1px;
}