@layer components {
  .tabs {
    display: flex;
    gap: var(--space-1);
    margin: var(--space-3) calc(-1 * var(--space-4)) 0;
    padding: 0 var(--space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .tab {
    flex: none;
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-3);
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    &[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
  }

  .tabs form { display: contents; }

  .tab--settings, .tab--star {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-inline: var(--space-2);
    border-width: 0 0 2px;
    background: none;
    cursor: pointer;
  }

  .tab--star + .tab--settings, form:has(.tab--star) + .tab--settings { margin-left: 0; }

  @media (width >= 1024px) {
    .tabs { margin: var(--space-4) 0 0; padding: 0; }
  }
}