@layer components {

  /*
    All this comes later:

    :root {accent-color: var(--main-500) }
  */

  ::placeholder {
    color: var(--base-400);
  }

  :focus-visible {
    outline: 1px solid var(--base-500);
    transition: outline-width .1s;
    outline-offset: 1px
  }

  form {
    flex-direction: column;
    margin-block: 1em;
    display: flex;
    gap: 1em;
  }

  input, textarea {
    font-family: inherit;
    font-size: inherit;
    color: var(--base-800);
    border: 1px solid var(--base-300);
    border-radius: .25em;
    padding: .875em 1em;
    width: 100%;
  }

  [type=search] {
    max-width: 20em;
    background: url(../icon/search.svg) .5em center no-repeat;
    margin-block: .5em;
    padding-left: 3em;
  }
}