.tab-list {
  display: flex;
  gap: 0.5rem;
  background: var(--background-secondary);
}

button[role="tab"] {
  background-color: transparent;
  color: var(--text-secondary);
  padding: 0.5em 30px;
  border: 0 none;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  font: var(--type-emphasis-m);
  cursor: pointer;
  transition:
    color 0.2s,
    background-color 0.2s;
}

button[role="tab"]:hover,
button[role="tab"]:focus {
  background-color: var(--background-tertiary);
  color: var(--text-primary);
}

button[role="tab"][aria-selected="true"] {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  background-color: var(--background-tertiary);
}