@layer components {
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-block-end: var(--block-space);
  }

  .tabs__tab {
    background: var(--color-ink-lightest);
    border-radius: 0.5em;
    color: var(--color-ink);
    flex: 1;
    font-size: var(--text-small);
    font-weight: 600;
    padding: 0.6em 1em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .tabs__tab--active {
    background: var(--color-ink);
    color: var(--color-ink-inverted);
  }
}