@layer components {
  /* Segmented control: links that pick one view of a page (a period, a filter).
   *
   *   <nav class="segmented" aria-label="Período">
   *     <a class="segmented__item is-active" aria-current="page">Mês</a>
   *     <a class="segmented__item">Atrasadas <span class="segmented__count">3</span></a>
   *   </nav>
   */
  .segmented {
    background: #eef1f6;
    border-radius: 10px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
  }

  .segmented__item {
    border-radius: 8px;
    color: #627d98;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 14px;
    text-decoration: none;

    &:hover {
      color: #243b53;
    }

    &.is-active {
      background: #fff;
      box-shadow: 0 1px 2px rgba(16, 42, 67, 0.12);
      color: #243b53;
    }
  }

  .segmented__count {
    color: var(--color-ink-medium);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    margin-inline-start: 4px;
  }
}