/* Tabs (crm-v2, the record page; the first in the app, recorded under
   HANSHI's Deviations): words on a hairline, each a link to a page of its
   own, the current one in ink over an ink rule. A count beside a word is
   faint, and only there when it is more than none. The row slides sideways
   rather than wrapping, so a phone keeps one line of them. */
@layer components {
  .tabs {
    display: flex;
    gap: var(--inline-space-double);
    margin-block-end: var(--block-space);
    overflow-x: auto;
    scrollbar-width: none;
    border-block-end: var(--border);
  }

  .tabs__tab {
    display: inline-flex;
    align-items: baseline;
    gap: var(--inline-space-half);
    padding-block: var(--block-space-half);
    color: var(--color-ink-subtle);
    text-decoration: none;
    white-space: nowrap;
    border-block-end: calc(var(--border-size) * 2) solid transparent;
    margin-block-end: calc(var(--border-size) * -1);

    &:hover {
      color: var(--color-ink);
    }

    &[aria-current] {
      color: var(--color-ink);
      font-weight: 500;
      border-block-end-color: currentColor;
    }
  }

  @media (any-hover: none) {
    .tabs__tab {
      min-block-size: 2.75rem;
      align-items: center;
    }
  }
}