@media (min-width: 901px) {
  .tml-hdr-actions .tml-search {
    width: 44px;
    min-width: 44px;
    transition: width 220ms ease;
  }

  .tml-hdr-actions .tml-search:focus-within {
    width: min(340px, 32vw);
  }

  .tml-hdr-actions .tml-search__field {
    width: 100%;
  }

  .tml-hdr-actions .tml-search__input {
    width: 100%;
    min-width: 0;
    padding-inline: 43px 8px;
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
  }

  .tml-hdr-actions .tml-search__input::placeholder {
    color: transparent;
  }

  .tml-hdr-actions .tml-search:focus-within .tml-search__input {
    padding-right: 40px;
    color: inherit;
    caret-color: currentColor;
    cursor: text;
  }

  .tml-hdr-actions .tml-search:focus-within .tml-search__input::placeholder {
    color: inherit;
    opacity: .64;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tml-hdr-actions .tml-search {
    transition: none;
  }
}

@media (max-width: 900px) {
  .tml-search--mobile {
    width: 44px;
    min-width: 44px;
    transition: width 220ms ease;
  }

  .tml-search--mobile:focus-within {
    width: 100%;
  }

  .tml-search--mobile .tml-search__field {
    width: 100%;
  }

  .tml-search--mobile .tml-search__input {
    width: 100%;
    min-width: 0;
    padding-inline: 43px 8px;
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
  }

  .tml-search--mobile .tml-search__input::placeholder {
    color: transparent;
  }

  .tml-search--mobile:focus-within .tml-search__input {
    padding-right: 40px;
    color: inherit;
    caret-color: currentColor;
    cursor: text;
  }

  .tml-search--mobile:focus-within .tml-search__input::placeholder {
    color: inherit;
    opacity: .64;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tml-search--mobile {
    transition: none;
  }
}