.tabs-nav, .tabs-content {
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}

.tabs-content__item {
  display: none;
}
.tabs-content__item.active {
  display: block;
}

.tabs-nav {
  display: flex;
  gap: var(--gap-xxs);
}
@media (max-width: 959px) {
  .tabs-nav {
    flex-wrap: wrap;
    margin-bottom: var(--gap);
  }
}

.tabs-nav--wrap {
  flex-wrap: wrap;
}

.tabs-nav__link {
  display: inline-block;
  white-space: nowrap;
  height: var(--control-height);
  line-height: var(--control-height);
  padding: 0 var(--gap);
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  text-decoration: none;
  border-radius: var(--control-border-radius) var(--control-border-radius) 0 0;
  box-sizing: border-box;
  user-select: none;
}
.tabs-nav__link:hover {
  background-color: var(--primary-light);
  color: var(--primary-inverse);
}
@media (max-width: 959px) {
  .tabs-nav__link {
    border-radius: var(--control-border-radius);
  }
}

.active > .tabs-nav__link {
  background-color: var(--primary);
  color: var(--primary-inverse);
}

.tabs--switcher .tabs-nav {
  background-color: var(--muted);
  padding: var(--gap-xxs);
  border-radius: var(--base-border-radius);
  margin-bottom: var(--gap);
}
@media (max-width: 759px) {
  .tabs--switcher .tabs-nav {
    padding: 0;
    background-color: transparent;
  }
}
.tabs--switcher .tabs-nav__item {
  flex-grow: 1;
}
@media (max-width: 759px) {
  .tabs--switcher .tabs-nav__item {
    flex-grow: 0;
  }
}
.tabs--switcher .active > .tabs-nav__link {
  background-color: var(--primary);
  color: var(--primary-inverse);
}
.tabs--switcher .tabs-nav__link {
  padding: 0 var(--gap-xs);
  border-radius: var(--control-border-radius);
  border-radius: var(--control-border-radius);
  background: var(--muted);
  color: var(--base-color);
  width: 100%;
  text-align: center;
}
.tabs--switcher .tabs-nav__link:hover {
  background-color: var(--primary-light);
  color: var(--primary-inverse);
}

.tabs--primary-bg .tabs-content {
  margin-top: 0;
  padding: var(--gap-md);
  background: var(--primary);
  border-radius: 0 var(--base-border-radius) var(--base-border-radius);
}

.tabs--feadback .tabs-nav {
  border-bottom: 2px solid var(--primary);
  margin-bottom: var(--gap-lg);
}
@media (max-width: 959px) {
  .tabs--feadback .tabs-nav {
    border-bottom: none;
  }
}
.tabs--feadback .tabs-nav__item {
  flex-grow: 1;
}
.tabs--feadback .tabs-nav__link {
  background-color: var(--bg-overlay);
  width: 100%;
  text-align: center;
}
.tabs--feadback .active > .tabs-nav__link {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}

.tabs--white .tabs-nav {
  margin-bottom: 0;
}

.tabs--white .active > .tabs-nav__link {
  background-color: var(--base-background);
  color: var(--base-color);
}

.tabs--white .tabs-nav__link {
  background-color: var(--grey300);
  color: var(--base-color);
  font-weight: 500;
  border-radius: var(--control-border-radius) var(--control-border-radius) 0 0;
}

.tabs--white .tabs-content {
  padding: var(--gap-md);
  background-color: var(--base-background);
  margin-top: 0;
  border-radius: 0 var(--base-border-radius) var(--base-border-radius) var(--base-border-radius);
}