/* "/" filters the rows of the current page (Fizzy's filter controller on #global-container).
/* In the nav it's just the key until focused or holding text, when it opens into a field. It
/* only shows on pages that have rows to filter, and a filtered-out row stays hidden even when
/* its own class sets a display. */
@layer components {
  .nav-filter {
    align-items: center;
    cursor: text;
    display: inline-flex;

    #global-container:not(:has([data-filter-target~="item"])) & {
      display: none;
    }

    &:is(:focus-within, :has(.nav-filter__input:not(:placeholder-shown))) {
      background-color: var(--color-white);
      border-color: var(--color-gray-300);

      .nav-filter__input {
        inline-size: 20ch;
      }
    }
  }

  .nav-filter__input {
    background: none;
    border: 0;
    box-shadow: none;
    color: inherit;
    inline-size: 0;
    outline: none;
    padding: 0;
    transition: inline-size 150ms ease;

    &:focus {
      box-shadow: none;
    }
  }

  [data-filter-target~="item"][hidden] {
    display: none !important;
  }
}