/* Native value fields share the approved /dev appearance. */
@layer components {
  :root {
    --ui-field-font: var(--value-font);
    --ui-field-label-font: 700 0.85rem/1.4 "DM Sans", sans-serif;
    --ui-field-hint-font: 400 0.85rem/1.4 "DM Sans", sans-serif;
    --ui-field-border: var(--line);
    --ui-field-hover-border: var(--warm-grey-300);
    --ui-field-background: var(--paper);
    --ui-field-padding: 0.5rem;
    .ui-field {
      display: grid;
      gap: 0.4rem;
      width: 100%;
      min-width: 0;
    }
    .ui-field-label {
      color: var(--muted);
      font: var(--ui-field-label-font);
    }
    .ui-input {
      --ui-field-accent: var(--accent);
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      height: var(--ui-action-size);
      padding: 0 var(--ui-field-padding);
      border: 1px solid var(--ui-field-border);
      border-radius: var(--control-radius);
      background: var(--ui-field-background);
      color: var(--ink);
      font: var(--ui-field-font);
      font-variant-numeric: tabular-nums;
      transition: border-color 120ms ease;

      &::placeholder {
        color: var(--muted);
      }
      &:not(:disabled):not([aria-disabled="true"]):hover {
        border-color: var(--ui-field-hover-border);
      }
      &:focus-visible {
        border-color: var(--ui-field-accent);
        outline: 2px solid var(--ui-field-accent);
        outline-offset: 2px;
      }
      &[readonly],
      &:disabled {
        background: var(--ui-muted-fill);
      }
      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      &[aria-invalid="true"] {
        --ui-field-accent: var(--danger);
        border-color: var(--ui-field-accent);
      }
      &::-webkit-datetime-edit,
      &::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
      }
    }
    textarea.ui-input {
      height: auto;
      min-height: 7rem;
      padding: var(--ui-field-padding);
      resize: vertical;
    }
    input.ui-input[type="file"] {
      padding: 0;

      &::file-selector-button {
        height: 100%;
        margin-right: var(--ui-field-padding);
        padding: 0 var(--ui-field-padding);
        border: 0;
        border-right: 1px solid var(--ui-field-border);
        background: transparent;
        color: var(--accent);
        font: var(--ui-action-font);
        cursor: pointer;
      }
      &::file-selector-button:hover {
        background: var(--ui-fill);
      }
    }
    .ui-combobox {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      &:focus-within {
        border-color: var(--accent);
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      &[aria-disabled="true"] {
        background: var(--ui-muted-fill);
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
    .ui-input.is-heading {
      height: auto;
      min-height: var(--ui-action-size);
      padding: 0.15rem var(--ui-field-padding);
      font: inherit;
      letter-spacing: inherit;
      color: inherit;
      field-sizing: content;
      overflow: hidden;
      resize: none;
    }
    .ui-field-hint,
    .ui-field-error {
      margin: 0;
      font: var(--ui-field-hint-font);
      color: var(--muted);
    }
    .ui-field-error {
      color: var(--danger);
    }

  }
}