@layer components {

  /* The ways to list a page's cards side by side, the one in use lit (houses/_order): as tall as the quick
     filter beside it. */
  .sort-switch {
    display: flex;
    flex: none;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-sunken);
    border: var(--hairline) solid var(--color-line);
    border-radius: 6px;
  }

  /* button_to's forms hold their buttons as blocks, not on a line of text. */
  .sort-switch__form {
    display: flex;
  }

  .sort-switch__option {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: calc(4px + var(--hairline-gap)) 10px;
    font: inherit;
    color: var(--color-ink-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;

    &:hover,
    &:focus-visible { /* no ring (base.css): lit as pointed at */
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 10%);
    }

    &[aria-pressed="true"] {
      color: var(--color-on-primary);
      background: var(--color-primary);
    }

    & .button__icon {
      width: 13px;
      height: 13px;
      margin: 0 -2px 0 0;
    }
  }

  /* How many a toggle's option stands for (houses/_archive_switch). */
  .sort-switch__count {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
}