.tabs[data-level],
[role="tablist"] {
  --colour-tabs-container-bg:  white;
  --colour-tabs-link-bg:       #dedede;
  --colour-tabs-hover-bg:      #e9e9e9;
  --colour-tabs-border:        #bbb;

  list-style: none;
  border-bottom: 1px solid var(--colour-tabs-border);
  padding: 0;
  white-space: nowrap;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /*flex-wrap: wrap;*/
  overflow: auto;
  gap: 3px;
}
:is(.tabs, [role="tablist"]) > :is(li, button) {
  /*float: left; !* LTR *!*/
  /*margin: 0 3px -1px 0;*/
  margin-bottom: -1px; /* to make it overlap the bottom line */
}
:is(.tabs, [role="tablist"]) > li {
  padding: 0;
}
:is(.tabs, [role="tablist"]) > :is(li a, button) {
  border-radius: 0;
  display: block;
  color: inherit;
  background: none;
  text-align: center;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: transparent;
  font-weight: normal;

}
:is(.tabs, [role="tablist"]) > :is(li a, button):is(:hover, :focus) {
  background-color: var(--colour-tabs-hover-bg);
  border-color: #b9b9b9;
  color: inherit;
}
:is(.tabs, [role="tablist"]) > :is(li.is-active > a, [aria-selected="true"]) {
  background: none;
  border-color: var(--colour-links);
  font-weight: bold;
}