// Input component - Form controls

/**
 * @section Input Base
 */

/** @public Base input field */
.input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  color: hsl(var(--foreground));
  position: relative;

  &::placeholder {
    color: hsl(var(--muted-foreground));
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring));
    border-color: hsl(var(--ring));
  }

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

  &[readonly] {
    background-color: hsl(var(--muted));
    cursor: default;
  }

  &.input-loading {
    cursor: wait;
    &::after {
      content: '';
      position: absolute;
      right: var(--spacing-3);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      border: 2px solid hsl(var(--muted));
      border-top-color: hsl(var(--foreground));
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
    }
  }
}

// Select specific styles
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);

  // Dark mode arrow
  .dark &,
  [data-theme="dark"] & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
}

/** @public Multi-line textarea */
.textarea {
  display: flex;
  min-height: 5rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: var(--spacing-3);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  color: hsl(var(--foreground));
  resize: vertical;

  &::placeholder {
    color: hsl(var(--muted-foreground));
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring));
    border-color: hsl(var(--ring));
  }

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

/**
 * @section Input Variants
 */

/** @public Error state input */
.input-error,
textarea.input-error {
  border-color: hsl(var(--destructive));

  &:focus {
    box-shadow: 0 0 0 2px hsl(var(--destructive));
    border-color: hsl(var(--destructive));
  }
}

/** @public Success state input */
.input-success,
textarea.input-success {
  border-color: hsl(var(--success));

  &:focus {
    box-shadow: 0 0 0 2px hsl(var(--success));
    border-color: hsl(var(--success));
  }
}

/** @public Warning state input */
.input-warning,
textarea.input-warning {
  border-color: hsl(var(--warning));

  &:focus {
    box-shadow: 0 0 0 2px hsl(var(--warning));
    border-color: hsl(var(--warning));
  }
}

/** @public Outlined input - transparent background, 2px border */
.input-outlined {
  background-color: transparent;
  border-width: 2px;
}

/** @public Borderless input - muted background */
.input-borderless {
  border-color: transparent;
  background-color: hsl(var(--muted));

  &:focus {
    border-color: transparent;
    box-shadow: none;
    background-color: hsl(var(--muted));
  }
}

/**
 * @section Input Sizes
 */

/** @public Small input */
.input-sm {
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
}

/** @public Large input */
.input-lg {
  height: 3rem;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--text-base);
}

/**
 * @section Form Elements
 */

/** @public Form label */
.label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--foreground));
  margin-bottom: var(--spacing-2);
  display: block;
}

/** @public Form group container */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

/** @public Input group with addons */
.input-group {
  display: flex;
  position: relative;
  width: 100%;

  .input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  .input-addon-start,
  .input-addon-end {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-3);
    font-size: var(--text-sm);
    background-color: hsl(var(--muted));
    border: 1px solid hsl(var(--input));
    color: hsl(var(--muted-foreground));
  }

  /** @public Input addon - left side */
  .input-addon-start {
    border-right: 0;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  /** @public Input addon - right side */
  .input-addon-end {
    border-left: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  // Handle button styling in groups
  .btn {
    position: relative;
    z-index: 1;

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: -1px;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin-right: -1px;
    }
  }

  // Input border radius handling
  // Only remove corners when there's an actual adjacent element (not absolutely positioned icons)
  .input-addon-start + .input,
  .btn:not(:first-child) + .input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .input:has(+ .input-addon-end),
  .input:has(+ .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  // Improve focus handling in groups
  .input:focus,
  .btn:focus {
    z-index: 2;
  }

  // Icon addons
  /** @public Input icon - left side */
  .input-icon-start,
  /** @public Input icon - right side */
  .input-icon-end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: 100%;
    padding: 0 var(--spacing-3);
    z-index: 3;
  }

  .input-icon-start {
    left: 0;
    & + .input {
      padding-left: var(--spacing-10);
    }
  }

  .input-icon-end {
    right: 0;
  }

  .input:has(+ .input-icon-end) {
    padding-right: var(--spacing-10);
  }
}

/** @public Input group with separated buttons - buttons maintain their own edges */
.input-group-separated {
  display: flex;
  position: relative;
  width: 100%;

  .input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  .input-addon-start,
  .input-addon-end {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-3);
    font-size: var(--text-sm);
    background-color: hsl(var(--muted));
    border: 1px solid hsl(var(--input));
    color: hsl(var(--muted-foreground));
  }

  .input-addon-start {
    border-right: 0;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .input-addon-end {
    border-left: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  // Buttons in separated groups keep their own borders and radius
  .btn {
    position: relative;
    z-index: 1;
    // No border/radius modifications - buttons maintain their individual styling
  }

  // Input border radius handling for addons only
  .input-addon-start + .input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .input:has(+ .input-addon-end) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  // Improve focus handling in groups
  .input:focus,
  .btn:focus {
    z-index: 2;
  }

  // Icon addons
  .input-icon-start,
  .input-icon-end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
    pointer-events: none;

    i {
      font-size: var(--text-sm);
    }
  }

  .input-icon-start {
    left: var(--spacing-3);
  }

  .input-icon-end {
    right: var(--spacing-3);
  }

  // Adjust input padding when icons are present
  .input:has(+ .input-icon-end),
  .input-icon-start + .input {
    padding-left: calc(var(--spacing-3) * 2 + 1rem);
  }

  .input:has(+ .input-icon-end) {
    padding-right: calc(var(--spacing-3) * 2 + 1rem);
  }
}

/** @public Form help text */
.form-help {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

/** @public Form error message */
.form-error {
  font-size: var(--text-xs);
  color: hsl(var(--destructive));
}