/**
 * @file
 * Search block — input styling.
 *
 * The submit button inherits from .button / .button--primary (Drupal applies
 * those classes automatically); see css/components/button.css.
 *
 * Markup hooks come from templates/block/block--search-form-block.html.twig
 * (outer .block-search) and Drupal's Form API (.form-search on the input).
 */
@layer components {
  .block-search .form-search {
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--surface-2);
    border: 1px solid #ccc;
    border-radius: var(--radius-2);
    font: inherit;
  }
  .block-search .form-search:focus {
    outline: 2px solid var(--upei-red);
    outline-offset: 2px;
  }

  /* Icon-on-input treatment: the .block-search__field wrapper (added in
     templates/block/block--search-form-block.html.twig) provides the
     positioning context for an absolute-positioned icon overlaid on
     the left side of the search input.

     The SVG is sized via `width` / `height` here rather than on the
     <svg> root, which lets the same icon scale to any context just by
     changing the .block-search__icon size. The `color` property
     recolors the icon because the SVG uses stroke="currentColor". */
  .block-search__field {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .block-search__icon {
    position: absolute;
    left: var(--size-3);
    top: 50%;
    width: 1em;
    height: 1em;
    transform: translateY(-50%);
    color: var(--text-2);
    pointer-events: none;
  }
  .block-search__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .block-search .form-search {
    padding-left: calc(var(--size-3) * 2 + 1em);
  }

}