:host {
  @apply flex flex-row gap-4 bg-transparent items-center box-border;
}

button.clear {
  @apply bg-transparent text-ucla-blue border-none outline-none font-bold text-regular;
}

.hint {
  @apply text-brand text-x-small font-bold;
}

.status {
  @apply text-ucla-blue text-right;
  width: 115px;
}

:host ::ng-deep {
  ui-select,
  input {
    @apply font-bold flex-grow;
  }

  input:not([type='radio']):not([type='checkbox']) {
    @apply outline-none border-none font-bold text-cta-l;

    &:disabled {
      @apply bg-white text-black;
    }
  }

  input[type='radio'],
  input[type='checkbox'] {
    @apply appearance-none bg-current;
    height: 1em;
    width: 1em;

    &[type='radio'] {
      mask: url('/assets/images/radio.svg') no-repeat;

      &:checked {
        mask: url('/assets/images/radio_checked.svg') no-repeat;
      }
    }

    &[type='checkbox'] {
      mask: url('/assets/images/checkbox.svg') no-repeat;

      &:checked {
        mask: url('/assets/images/checkbox_checked.svg') no-repeat;
      }
    }
  }
}

.input-wrapper {
  @apply flex flex-row-reverse flex-grow items-center;

  span {
    @apply font-bold text-lg;
  }
}

:host[type='radio'][variant='default'] ::ng-deep,
:host[type='checkbox'][variant='default'] ::ng-deep {
  .input-wrapper {
    @apply grid grid-flow-col gap-4;
  }

  label,
  input {
    @apply cursor-pointer;
  }

  input {
    @apply flex-grow-0 m-0;
  }

  input:checked ~ label {
    @apply font-bold;
  }

  input:disabled,
  input:disabled ~ label {
    @apply text-ucla-blue cursor-not-allowed;
  }

  label {
    @apply flex-grow -ml-2;
  }
}

:host[variant='default'] {
  ::ng-deep {
    input:not([type='radio']):not([type='checkbox']),
    ui-select {
      @apply border-t-0 border-l-0 border-r-0  border-solid pt-px-20 pb-px-10;
      border-bottom-width: 2px;
      border-color: #e1ebf5;
    }

    input.ng-touched.ng-invalid,
    ui-select.ng-touched.ng-invalid {
      @apply border-brand;
    }
  }
}

:host[variant='default']:not([type='radio']):not([type='checkbox']) {
  @apply relative mt-px-20;

  label {
    @apply absolute left-0  font-bold text-cta-l pointer-events-none text-ucla-blue;
    top: 20px;
    transition: 250ms all ease-in-out;
  }

  .hint {
    @apply absolute right-0;
    bottom: -21px;
  }

  // ::ng-deep input:focus ~ label,
  // ::ng-deep input:not(.empty) ~ label,
  // ::ng-deep ui-select.toggled ~ label,
  // ::ng-deep ui-select:not(.empty) ~ label {
  //   @apply top-0 text-small font-semibold;
  //   // font-size: 10px;
  // }

  .input-wrapper.focused,
  .input-wrapper:not(.empty) {
    label {
      @apply top-0 text-small font-semibold;
    }
  }
}

:host[variant='inline'] {
  .input-wrapper {
    @apply gap-0;
  }
}
