@layer components {
  .segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 3px;
    border-radius: var(--radius-control);
    background: var(--surface-sunken);

    & > * {
      display: grid;
      place-items: center;
      min-height: 40px;
      border-radius: calc(var(--radius-control) - 3px);
      color: var(--ink-muted);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      border: 0;
      background: none;
      cursor: pointer;
    }

    & > :is([aria-current="page"], [aria-pressed="true"]) {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 1px 3px var(--shadow);
    }
  }
}