.input {
  @apply relative text-spur-black;

  &.is-currency {
    &::before {
      @apply absolute font-sans;
      content: '$';
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
    }

    & .input-field {
      @apply pl-8;
    }
  }
}

.input-icon {
  @apply fill-current pointer-events-none absolute z-10;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}

.input-field {
  @apply px-4 h-11 w-full border border-spur-grey rounded-md text-spur-black;
}

.input-field:hover {
  cursor: pointer;
}

.input-field.is-inline {
  @apply inline-block mx-2 w-16;
}

.input.has-icon .input-field {
  @apply pl-14;
}

.input-clear {
  @apply fill-current text-support-purple absolute z-10;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

/* Size modifiers */
.input-field-sm {
  max-width: 14.75rem;
}

.input-field-lg {
  max-width: 30rem;
}

/* Disabled state */
.input-field[disabled] {
  @apply bg-background-grey;
}