// =============================================================================
// Input
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

.input {
  width: 100%;
  border-radius: $radius;
  border: 1px solid $neutral-300;
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  font-family: $font-sans;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
  color: $neutral-900;
  @include transition-fast(color, background-color, border-color, box-shadow);

  &::placeholder {
    color: $neutral-400;
  }

  &:focus {
    outline: none;
    border-color: $primary-500;
    box-shadow: 0 0 0 2px rgba($primary-500, 0.2);
  }

  &:disabled {
    background-color: $neutral-100;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .dark & {
    border-color: $neutral-600;
    background-color: $neutral-900;
    color: $neutral-50;

    &::placeholder {
      color: $neutral-500;
    }

    &:focus {
      border-color: $primary-500;
      box-shadow: 0 0 0 2px rgba($primary-500, 0.2);
    }

    &:disabled {
      background-color: $neutral-800;
    }
  }
}

// Sizes
.input-sm {
  padding: 0.375rem 0.75rem;
  font-size: $font-size-xs;
  line-height: $line-height-xs;
}

.input-lg {
  padding: 0.625rem 0.75rem;
  font-size: $font-size-base;
  line-height: $line-height-base;
}

// Error state
.input-error {
  border-color: $error-500;

  &:focus {
    border-color: $error-500;
    box-shadow: 0 0 0 2px rgba($error-500, 0.2);
  }

  .dark & {
    border-color: $error-500;

    &:focus {
      border-color: $error-500;
      box-shadow: 0 0 0 2px rgba($error-500, 0.2);
    }
  }
}

// Textarea
textarea.input {
  resize: vertical;
  min-height: 5rem;
}

// Select native
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}
