.input {
  @apply flex flex-1;
  @apply p-3 leading-none;
  @apply border rounded border-gray-400;
  @apply outline-none !important;

  height: 40px;

  transition: .4s;

  &.input-success {
    @apply border-success;
  }

  &.input-danger {
    @apply border-danger;
  }
}

.input:focus {
  box-shadow: 0 0 0 3px rgba(theme('colors.gray.400'), 0.5);

  &.input-success {
    box-shadow: 0 0 0 3px rgba(theme('colors.success.default'), 0.5);
  }

  &.input-danger {
    box-shadow: 0 0 0 3px rgba(theme('colors.danger.default'), 0.5);
  }
}

.input-group {
  @apply flex flex-wrap items-stretch w-full relative;

  @apply border rounded border-gray-400;

  transition: .4s;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  .input-group-component {
    @apply px-3 border-0 outline-none !important text-gray-400;

    padding-top: 6px;
    padding-bottom: 6px;

    &.button {
      @apply rounded-r-sm;

      @apply border-l;

      @apply text-gray-400;
      width: 80px;

      &:hover:enabled,
      &.filled {
        @apply bg-success text-white;
      }

      &:disabled {
        cursor: not-allowed;
      }
    }
  }

  &.error {
    border-color: theme('colors.danger.default');
  }

  input.input-group-component {
    @apply px-0;
  }
}

.field-disabled .input {
  @apply border-gray-100;
}
