/**
 * Input Component Styles
 *
 * Form input field with label and help text.
 */

.c--input {
  --_input_w: var(--input_w, stretch);
  --_input_m-b: var(--input_m-b, 0px 0px);
  --_input_p-b: var(--input-field_p-b, var(--_form_input_p-b));
  --_input_p-i: var(--input-field_p-i, var(--_form_input_p-i));
  --_input_f-s: var(--input-field_f-s, var(--_form_input_f-s));
  --_input_f-w: var(--input-field_f-w, var(--f-w_light));
  --_input_l-h: var(--input-field_l-h, var(--_form_input_l-h));
  --_input_c: var(--input-field_c, var(--body_c));
  --_input_bg: var(--input-field_bg, var(--c-white));
  --_input_b-w: var(--input-field_b-w, var(--_form_input_b-w));
  --_input_b-c: var(--input-field_b-c, var(--_form_input_b-c));
  --_input_b-r: var(--input-field_b-r, var(--_form_b-r));
  --_input_t-t: var(--input-field_t-t, var(--t--b));

  /* Variables — field focus */
  --_input_b-c_focus: var(--input-field_b-c_focus, var(--c-primary));

  /* Variables — required indicator */
  --_input-required_c: var(--input-required_c, var(--c-danger));
  --_input-required_m-i-s: var(--input-required_m-i-s, var(--scale-50));

  /* Variables — description */
  --_input-desc_f-s: var(--input-desc_f-s, var(--f-s_sm));
  --_input-desc_c: var(--input-desc_c, var(--c-muted));
  --_input-desc_m-b-s: var(--input-desc_m-b-s, var(--scale-100));

  width: var(--_input_w);
  margin-block: var(--_input_m-b);
  padding-block: var(--_input_p-b);
  padding-inline: var(--_input_p-i);
  font-size: var(--_input_f-s);
  font-weight: var(--_input_f-w);
  line-height: var(--_input_l-h);
  color: var(--_input_c);
  background-color: var(--_input_bg);
  border: var(--_input_b-w) solid var(--_input_b-c);
  border-radius: var(--_input_b-r);
  transition: var(--_input_t-t);
}

.c--input:focus {
    border-color: var(--_input_b-c_focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in oklch, var(--c-primary), transparent 75%);
  }

.c--input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

/* Variations */
.c--input--sm {
  --_input_p-b: var(--input-field_p-b--sm, var(--scale-100));
  --_input_p-i: var(--input-field_p-i--sm, var(--scale-200));
  --_input_f-s: var(--input-field_f-s--sm, var(--f-s_sm));
}

.c--input--lg {
  --_input_p-b: var(--input-field_p-b--lg, var(--scale-300));
  --_input_p-i: var(--input-field_p-i--lg, var(--scale-400));
  --_input_f-s: var(--input-field_f-s--lg, 1.25rem);
}