@import "../input/input.css";

@layer lotek {
  /*
   * Both classes in the selector, not just .lt-search.
   *
   * .lt-input sets padding with the shorthand, and .lt-search only
   * padding-inline-start. With equal specificity the order the stylesheets
   * load in decides, and if the consumer imports input.css last, the room
   * for the icon disappears. With both classes the rule wins in any order.
   */
  .lt-input.lt-search {
    padding-inline-start: var(--lt-search-icon-space, var(--lt-spacing-10));
    background-image: var(--lt-icon-search);
    background-repeat: no-repeat;
    background-position: left var(--lt-spacing-3) center;
    background-size: var(--lt-search-icon-size, var(--lt-spacing-5));
  }

  .lt-search:dir(rtl) {
    background-position: right var(--lt-spacing-3) center;
  }

  /* The browser's own cross in a type="search" field. Safari and Chrome draw
     it differently, and Firefox not at all. */
  .lt-search::-webkit-search-cancel-button {
    cursor: pointer;
  }

  .lt-search-row {
    display: flex;
    align-items: stretch;
    gap: var(--lt-spacing-2);
  }

  .lt-search-row .lt-search {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /* High contrast: the magnifying glass is painted into the image with a
     fixed colour, and can become invisible. It is better to remove it and
     give the room back. */
  @media (forced-colors: active) {
    .lt-input.lt-search {
      background-image: none;
      padding-inline-start: var(--lt-spacing-3);
    }
  }
}