/* kb field - label above, text input / textarea / search, 4px radius, focus ring, error text below.
   Markup:
     <div class="kb-field">
       <label for="x">Label</label>
       <input id="x" type="text">                     (or <textarea>, or type="search")
       <p class="kb-field__hint">Optional help</p>
       <p class="kb-field__error" id="x-err">Error text</p>      with .kb-field--error and aria-invalid="true" on the control
     </div>
     Search with icon:
       <div class="kb-field kb-field--search"><label for="s">Søg</label>
         <div class="kb-field__wrap"><span class="kb-field__icon">(svg)</span><input id="s" type="search"></div></div>
   Checkboxes, radios and selects have their own components (check.css, select.css). */
@layer kb.components {
  .kb-field {
    display: block;
    position: relative;
    min-width: 0;
  }

  .kb-field > label,
  .kb-field__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kb-text);
  }

  .kb-field :is(input, textarea):not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="file"], [type="color"], [type="image"], [type="hidden"]) {
    display: block;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--kb-line-strong);
    border-radius: var(--kb-radius);
    background: var(--kb-card);
    color: var(--kb-text);
    font: inherit;
    line-height: 1.35;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  .kb-field textarea {
    min-height: 70px;
    resize: vertical;
  }

  .kb-field :is(input, textarea)::placeholder {
    color: var(--kb-text-muted);
    opacity: 1;
  }

  /* Focus: border in the focus colour plus the 3px ring; size never changes. */
  .kb-field :is(input, textarea):focus-visible,
  .kb-field :is(input, textarea):focus {
    border-color: var(--kb-focus-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-primary) 18%, transparent);
  }

  .kb-field :is(input, textarea):disabled {
    opacity: .6;
    cursor: not-allowed;
    background: var(--kb-hover);
  }

  .kb-field__hint,
  .kb-field__error {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.35;
  }
  .kb-field__hint { color: var(--kb-text-muted); }
  .kb-field__error { color: var(--kb-status-err-ink); }
  .kb-field__error:empty { display: none; }

  .kb-field--error :is(input, textarea),
  .kb-field :is(input, textarea)[aria-invalid="true"] {
    border-color: var(--kb-danger);
  }
  .kb-field--error :is(input, textarea):focus,
  .kb-field :is(input, textarea)[aria-invalid="true"]:focus {
    border-color: var(--kb-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-danger) 18%, transparent);
  }

  /* search */
  .kb-field input[type="search"]::-webkit-search-decoration,
  .kb-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  .kb-field__wrap { position: relative; }

  .kb-field--search .kb-field__icon {
    position: absolute;
    left: 10px;
    top: 0;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--kb-text-muted);
    pointer-events: none;
  }
  .kb-field--search .kb-field__icon svg { width: 16px; height: 16px; }
  .kb-field--search input[type="search"] { padding-left: 34px; }

  @media (prefers-reduced-motion: no-preference) {
    .kb-field :is(input, textarea) { transition: border-color .2s, box-shadow .2s; }
  }
}