.tabs {
  --tabs-color-text: var(--color-bg);
  --tabs-color-active-text: var(--color-black);
  --tabs-color-bg: var(--color-text);
  --tabs-color-active: var(--color-primary);
}

.tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.tabs__item {
  display: inline-block;
  font-size: var(--scale-00);
  color: var(--tabs-color-text);
  white-space: nowrap;
}

.tabs__link,
.tabs__item > a {
  display: inline-block;
  padding: var(--size-2) var(--size-4);
  color: var(--tabs-color-text);
  background-color: var(--tabs-color-bg);
  text-decoration: none;
  white-space: nowrap;
}

.tabs__item:not(:last-child) {
  margin-right: var(--size-1);
}

.tabs__item.is-active .tabs__link,
.tabs__item.is-active .tabs__item > a {
  color: var(--tabs-color-active-text);
  background-color: var(--tabs-color-active);
}