/* Form Fields */
@layer components {
  .input-wrapper {
    position: relative;
    display: flex;
    color: var(--input-text, var(--color-semantic-text-primary));
  }

  .input-wrapper.error {
    color: var(--form-base-states-error-color, var(--color-primitive-red-600));
  }

  .input,
  .select,
  .dropdown-select-trigger,
  .textarea {
    display: block;
    text-align: left;
    width: 100%;
    border: var(--form-base-border);
    border-radius: var(--form-base-border-radius);
    box-shadow: none;
    font-size: var(--form-base-font-size, var(--font-size-sm));
    padding: var(--form-base-padding, 0.75rem 1.25rem);
    background: var(--form-base-bg, var(--color-semantic-background-light-100));
    transition: var(--form-base-transition);
  }

  .input.error,
  .select.error,
  .dropdown-select-trigger.error,
  .textarea.error {
    color: var(--form-base-states-error-color, var(--color-primitive-red-600));
    border-color: var(
      --form-base-states-error-border-color,
      var(--color-primitive-red-300)
    );
  }

  .input:focus,
  .input:focus-visible,
  .select:focus,
  .select:focus-visible,
  .dropdown-select-trigger:focus,
  .dropdown-select-trigger:focus-visible,
  .textarea:focus,
  .textarea:focus-visible {
    border-color: var(--form-base-states-focus-border-color);
    outline: var(--form-base-states-focus-outline);
    outline-offset: var(--form-base-states-focus-outline-offset);
    box-shadow: var(--form-base-states-focus-box-shadow);
  }

  .input.error:focus,
  .input.error:focus-visible,
  .select.error:focus,
  .select.error:focus-visible,
  .dropdown-select-trigger.error:focus,
  .dropdown-select-trigger.error:focus-visible,
  .textarea.error:focus,
  .textarea.error:focus-visible {
    border-color: var(--form-base-states-error-border-color);
    outline: var(--form-base-states-focus-error-outline);
    outline-offset: var(--form-base-states-focus-error-outline-offset);
  }

  .input.disabled,
  .select.disabled,
  .dropdown-select-trigger.disabled,
  .textarea.disabled {
    background: var(
      --form-base-states-disabled-bg,
      var(--color-primitive-neutral-100)
    );
    color: var(
      --form-base-states-disabled-color,
      var(--color-primitive-neutral-500)
    );
    cursor: not-allowed;
  }

  .input-prepend,
  .input-append {
    display: inline-flex;
    align-items: center;
    border: var(--form-base-border);
    background: var(
      --form-base-prepend-append-bg,
      var(--color-primitive-neutral-100)
    );
    padding: var(--form-base-prepend-padding, 0 0.75rem);
    color: var(
      --form-base-prepend-append-color,
      var(--color-primitive-neutral-500)
    );
    font-size: var(--form-base-font-size, var(--font-size-sm));
  }

  .input-prepend {
    border-radius: var(--form-base-border-radius) 0 0
      var(--form-base-border-radius);
    border-right: 0;
  }
  .input-append {
    border-radius: 0 var(--form-base-border-radius)
      var(--form-base-border-radius) 0;
    border-left: 0;
  }

  .input-prepend.error,
  .input-append.error {
    border-color: var(
      --form-base-states-error-border-color,
      var(--color-red-300)
    );
  }

  .input-icon {
    pointer-events: none;
    position: absolute;
    inset-y: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: var(--form-base-prepend-append-padding, 0.75rem);
    color: var(--form-base-prepend-append-color, var(--color-neutral-400));
    font-size: var(--form-base-prepend-append-size, 1rem);
  }

  .input-icon.error {
    color: (var (--form-base-states-error-border-color), var(--color-red-500));
  }

  /* Select specific styles */
  .select {
    padding-right: 2.5rem; /* Space for dropdown icon */
    appearance: none;
  }

  /* Textarea specific styles */
  .textarea {
    border-radius: var(--form-base-textarea-border-radius);
    resize: vertical;
    min-height: var(--form-base-textarea-min-height);
  }

  /* Datepicker specific styles - hide flatpickr arrow */
  .input[data-controller*='date-picker'] {
    padding-right: 2.5rem; /* Space for calendar icon */
  }

  /* Hide flatpickr default arrow */
  .flatpickr-input {
    background-image: none !important;
  }

  /* Alternative way to hide flatpickr arrow */
  input[data-controller*='date-picker']::-webkit-calendar-picker-indicator {
    display: none !important;
  }

  input[data-controller*='date-picker']::-webkit-inner-spin-button,
  input[data-controller*='date-picker']::-webkit-outer-spin-button {
    display: none !important;
  }

  /* Custom focus styles for datepicker inputs */
  .input[data-controller*='date-picker']:focus,
  .input[data-controller*='date-picker']:focus-visible {
    border-color: #d1d1d6 !important;
    outline: #e5e5ea !important;
    outline-offset: 2px !important;
    box-shadow: transparent !important;
  }
}