/* "/" filters the rows of the current page (Fizzy's filter controller on #global-container).
/* In the header it's a small shadcn input: just the key, as a ui-kbd, until focused or holding
/* text, when it opens into the field with the input's border and focus ring. 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 ui {
  .nav-filter {
    align-items: center;
    block-size: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    cursor: text;
    display: inline-flex;
    gap: 0.5rem;
    padding-inline: 0.5rem;
    transition: background-color 150ms, border-color 150ms, box-shadow 150ms;

    &:hover {
      background-color: var(--accent);
    }

    > .ui-kbd {
      flex-shrink: 0;
    }

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

    &:is(:focus-within, :has(.nav-filter__input:not(:placeholder-shown))) {
      background-color: var(--background);
      border-color: var(--input);
      box-shadow: var(--shadow-xs);

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

    &:focus-within {
      border-color: var(--ring);
      box-shadow: var(--shadow-xs), var(--ring-focus);
    }
  }

  .nav-filter__input {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--foreground);
    font: inherit;
    font-size: var(--text-normal);
    inline-size: 0;
    outline: none;
    padding: 0;
    transition: inline-size 150ms ease;

    &::placeholder {
      color: var(--muted-foreground);
    }

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

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