@layer components {
  /* Which record you are reading, and the way to another one.
   *
   * The control at the far edge of a workspace header. A property has one and a
   * channel has one, and they are the same object to whoever presses it: a name,
   * a chevron, and a list of the others. What differs is the list — a portfolio
   * is searched and paged, four channels are four links — so only the chrome is
   * here and each caller brings its own surface.
   *
   * It was `.property-switcher`, and a channel screen reaching for that would
   * have been a channel wearing a property's class. Renamed rather than copied,
   * which is the whole of why this file exists.
   *
   * The surface is shared/_popover, so Escape, an outside click and focus leaving
   * dismiss it exactly as they dismiss every other overlay, and none of it is
   * spelled out twice. The block is a wrapper *around* that popover rather than
   * the popover itself, so a caller can hang a controller on it — the property's
   * carries frame-search, and dialog:open bubbles up to it from the controller's
   * own element.
   *
   * It is the flex item in .workspace__header that must not give way: sized by
   * what the name says, up to the cap, rather than by what the description beside
   * it wanted. A label that gives way first reads as a different record on every
   * screen — "Ski Chalet Park …" where the sentence happened to be long. The
   * description wraps instead, which costs it a line. */
  .record-switcher {
    --record-switcher-width: calc(var(--space) * 18);
    --record-switcher-row-height: var(--space-and-half);

    flex-shrink: 0;
  }

  .record-switcher__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-half);
    max-inline-size: var(--record-switcher-width);
    padding: var(--space-half);
    border: var(--border);
    border-radius: var(--radius-large);
    background: var(--color-canvas);
    box-shadow: var(--shadow-card);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--surface-hover);
      }
    }
  }

  /* The name. It is the part that must not give way — the flex rules on the block
   * say why — so it takes the ellipsis where the cap is reached rather than
   * pushing the chevron off the end. */
  .record-switcher__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-normal);
    font-weight: var(--weight-semibold);
  }

  .record-switcher__chevron {
    flex-shrink: 0;
    color: var(--color-ink-soft);
  }

  /* The row, and the only part of the surface that is ours.
   *
   * Not .menu__item, which cannot leave a .menu: its padding and radius are
   * custom properties declared on the block, so outside one the declarations are
   * invalid and the row loses its box entirely. Not .combobox__option either —
   * its highlight is [data-active], set by navigable-list as the arrow keys pass
   * over it, so a row with a real href would never light up under the pointer. */
  .record-switcher__item {
    display: flex;
    align-items: center;
    gap: var(--space-half);
    padding: var(--space-quarter);
    border-radius: var(--radius-small);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background: var(--surface-hover);
      }
    }
  }

  /* The one you are already on. Marked rather than left out of the list: a list
   * of three where there are four is a list somebody counts twice. */
  .record-switcher__item[aria-current] {
    background: var(--sidebar-item-current-background);
    font-weight: var(--weight-semibold);
  }

  /* No room for it beside a title on a phone, which is what the card the property
     switcher grew out of also decided. The rail's "All properties" — or "All
     channels" — is the way across down here, and below this band the rail is a
     strip along the top. */
  @media (width < 40rem) {
    .record-switcher {
      display: none;
    }
  }
}