.tabs :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.5rem;
}

/* The tab list is the list of tab names */
[role="tablist"] {
  display: flex;
  flex-flow: row wrap;
  row-gap: 0.25rem;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* The tab is the clickable element that selects between tabpanels (see below) */
[role="tab"] {
  border: none;
  padding: 0.75em 1.3em 0.9em;
  background-color: var(--pst-color-background);
  margin-bottom: 0;
  color: var(--pst-color-text);
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
}

[role="tab"]:hover {
  color: var(--pst-color-secondary);
  box-shadow:
    0 -0.125rem var(--pst-color-secondary),
    0 0.125rem var(--pst-color-secondary);
}

/* Selected tab behavior */
[role="tab"][aria-selected="true"] {
  color: var(--pst-color-primary);
  box-shadow: 0 0.125rem var(--pst-color-primary);
}

[role="tab"][aria-selected="true"]:hover {
  color: var(--pst-color-secondary);
  box-shadow:
    0 -0.125rem var(--pst-color-secondary),
    0 0.125rem var(--pst-color-secondary);
}

/* The tab panel is in which the tab contents appear */
[role="tabpanel"] {
  border-top: 1px solid var(--pst-color-border);
  border-bottom: 1px solid var(--pst-color-border);
  margin-top: 0.063rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100%;
  overflow: auto;
}

[role="tabpanel"].is-hidden {
  display: none;
}