/* Use of 3.5px is half of the overlapping border of the active item. */
.tabs {
  list-style: none;
  padding: 0 1em;
  margin: 0 -1em 0;
  display: flex;
  position: relative;
  top: -3.5px;
  flex-wrap: wrap;
}
.tabs > * {
  align-items: stretch;
}
.tabs > * > * {
  padding: 0.25em .5em .5em;
  display: block;
}
.tabs a {
  text-decoration: none;
  cursor: pointer;
}
.tabs .current, .tabs > *:not(.current) a:hover, .tabs > *:not(.current) a:focus {
  background: var(--tab-active-background-color);
  box-shadow: inset 1px 0 var(--tab-active-box-shadow-color), inset -1px 0 var(--tab-active-box-shadow-color), inset 0 -1px var(--tab-active-box-shadow-color);
}
.tabs .current {
  border-top: 7px solid var(--tab-active-top-border-color);
}
.tabs > *:not(.current) a {
  margin-top: 3.5px;
  padding-top: calc(0.25em + 3.5px);
}
