[role='tablist'] {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid light-dark(#666, #aaa);
}

[role='tablist'] > button[role='tab'] {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 2px 16px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[role='tablist'] > button[role='tab']:hover {
  background-color: light-dark(#eeeeee7f, #6666667f);
}

[role='tablist'] > button[role='tab'][aria-selected='true'] {
  background-color: light-dark(#eee, #666);
  border-color: light-dark(#666, #aaa);
  pointer-events: none;
  cursor: default;
}