.site-tabs {
  display: flex;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto 12px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #111;
  font: 600 14px/1.2 "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.site-tabs a {
  display: block;
  padding: 7px 15px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.site-tabs a + a { border-left: 1px solid currentColor; }
.site-tabs a:hover,
.site-tabs a[aria-current="page"] { background: currentColor; }
.site-tabs a:hover span,
.site-tabs a[aria-current="page"] span { color: #fff; }
.site-tabs a:focus-visible { outline: 2px solid #555; outline-offset: -3px; }

.site-tabs--light { color: #444; }
.site-tabs--light a:hover span,
.site-tabs--light a[aria-current="page"] span { color: #fff; }
.site-tabs--light a:focus-visible { outline-color: #222; }

@media (max-width: 380px) {
  .site-tabs { font-size: 13px; }
  .site-tabs a { padding: 7px 7px; }
}