@layer ari.components {
  .ari-field {
    --ari-field-control-height: var(--ari-control-height-md);
    --ari-field-padding-inline: var(--ari-space-3);
    --ari-field-bg: var(--ari-color-bg-surface);
    --ari-field-border: var(--ari-color-border-default);
    --ari-field-border-hover: var(--ari-color-border-strong);
    --ari-field-text: var(--ari-color-text-primary);
    --ari-field-placeholder: var(--ari-color-text-muted);
    --ari-field-message: var(--ari-color-text-secondary);
    --ari-field-focus-border: var(--ari-color-border-focus);
    --ari-field-focus-shadow: var(--ari-shadow-focus);

    min-inline-size: 0;
    display: grid;
    gap: var(--ari-space-1);
    font-family: var(--ari-font-family-sans);
  }

  .ari-field--sm {
    --ari-field-control-height: var(--ari-control-height-sm);
    --ari-field-padding-inline: var(--ari-space-2);
  }

  .ari-field--md {
    --ari-field-control-height: var(--ari-control-height-md);
    --ari-field-padding-inline: var(--ari-space-3);
  }

  .ari-field--lg {
    --ari-field-control-height: var(--ari-control-height-lg);
    --ari-field-padding-inline: var(--ari-space-3);
  }

  .ari-field__label-row {
    min-inline-size: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ari-space-2);
  }

  .ari-field__label {
    min-inline-size: 0;
    color: var(--ari-color-text-primary);
    font-size: var(--ari-font-size-label);
    font-weight: var(--ari-font-weight-medium);
    line-height: var(--ari-line-height-compact);
  }

  .ari-field__required {
    color: var(--ari-color-status-danger-text);
  }

  .ari-field__optional {
    flex: 0 0 auto;
    color: var(--ari-color-text-muted);
    font-size: var(--ari-font-size-caption);
    font-weight: var(--ari-font-weight-regular);
    line-height: var(--ari-line-height-compact);
  }

  .ari-field__control {
    inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    padding-block: var(--ari-space-2);
    padding-inline: var(--ari-field-padding-inline);
    border:
      var(--ari-border-width-default)
      solid
      var(--ari-field-border);
    border-radius: var(--ari-radius-sm);
    background: var(--ari-field-bg);
    color: var(--ari-field-text);
    font-family: var(--ari-font-family-sans);
    font-size: var(--ari-font-size-control);
    font-weight: var(--ari-font-weight-regular);
    line-height: var(--ari-line-height-compact);
    transition:
      background-color
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard),
      border-color
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard),
      box-shadow
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard);
  }

  input.ari-field__control {
    block-size: var(--ari-field-control-height);
  }

  textarea.ari-field__control {
    min-block-size: calc(var(--ari-field-control-height) * 3);
    max-block-size: calc(var(--ari-field-control-height) * 6);
    overflow-y: auto;
    line-height: var(--ari-line-height-body);
    resize: none;
    field-sizing: content;
  }

  .ari-field__control::placeholder {
    color: var(--ari-field-placeholder);
    opacity: 1;
  }

  .ari-field__control:hover:not(:disabled):not(:read-only):not([aria-invalid="true"]) {
    border-color: var(--ari-field-border-hover);
  }

  .ari-field__control:focus-visible {
    outline: 0;
    border-color: var(--ari-field-focus-border);
    box-shadow: var(--ari-field-focus-shadow);
  }

  .ari-field__control:disabled {
    border-color: var(--ari-color-border-default);
    background: var(--ari-color-bg-disabled);
    color: var(--ari-color-text-disabled);
    cursor: not-allowed;
  }

  .ari-field__control:disabled::placeholder {
    color: var(--ari-color-text-disabled);
  }

  .ari-field__control:read-only:not(:disabled) {
    background: var(--ari-color-bg-subtle);
  }

  .ari-field__control[aria-invalid="true"] {
    border-color: var(--ari-color-border-danger);
  }

  .ari-field__control[aria-invalid="true"]:focus-visible {
    border-color: var(--ari-color-border-danger);
  }

  .ari-field__hint,
  .ari-field__message {
    margin: 0;
    font-size: var(--ari-font-size-caption);
    font-weight: var(--ari-font-weight-regular);
    line-height: var(--ari-line-height-body);
  }

  .ari-field__hint {
    color: var(--ari-field-message);
  }

  .ari-field__message {
    color: var(--ari-color-status-danger-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer ari.components {
    .ari-field__control {
      transition: none;
    }
  }
}