/*
 * Librarium Militaris: the search box.
 *
 * One input, sunk into the masthead plate, posting the archive's filter form.
 */

@layer components {
  .searchfield {
    position: relative;
    width: 100%;
    max-width: 42rem;
  }

  .searchfield__icon {
    position: absolute;
    top: 50%;
    left: var(--space-16);
    transform: translateY(-50%);
    width: var(--space-20);
    height: var(--space-20);
    color: var(--color-ink-dim);
    pointer-events: none;
    transition: color var(--transition-fast);

    .searchfield:focus-within & { color: var(--color-accent); }
  }

  .searchfield__input {
    display: block;
    width: 100%;
    /* The left inset clears the icon rather than the edge. */
    padding: var(--space-16) var(--space-16) var(--space-16) var(--space-44);
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-field);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink-bright);
    font-family: var(--font-sans);
    font-size: var(--text-18);
    line-height: var(--leading-28);
    box-shadow: var(--shadow-field);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

    &::placeholder { color: var(--color-ink-faint); }
    &::-webkit-search-cancel-button { -webkit-appearance: none; }

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-field);
    }
  }
}