.tab-wrapper {
  position: relative;
}
.tab-wrapper .nav-tabs {
  flex-wrap: nowrap;
  flex: 1 1;
}
.tab-scroll {
  overflow-x: scroll;
  overflow-y: auto;
  position: relative;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: 100%;
}
.tab-wrapper .nav-tabs li {
  width: max-content;
}
.tab--primary .nav-tabs {
  gap: 24px;
  border-color: var(--color-border-width-border-width-inactive);
  margin-bottom: var(--space-space-lg);
}
.tab--primary .nav-tabs .nav-link {
  padding: var(--space-space-md) 0;
  color: var(--color-foreground-foreground-inactive);
  border: 0;
  position: relative;
}
.tab--primary .nav-tabs .nav-link:hover {
  color: var(--color-foreground-foreground-hover);
}
.tab--primary .nav-tabs .nav-link.active {
  color: var(--color-foreground-foreground-active);
  background-color: transparent;
}
.tab--primary .nav-tabs .active:before {
  content: '';
  background-color: var(--color-border-width-border-width-active);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
}
.tab--secondary .nav-tabs .active:before {
  display: none;
}
.tab--secondary .nav-tabs {
  gap: 8px;
  border-color: transparent;
  margin-bottom: var(--space-space-xl);
}
.tab--secondary .nav-tabs .nav-link {
  padding: 6px var(--space-space-lg);
  border: 1px solid var(--color-border-width-border-width-inactive);
  border-radius: var(--border-radius-border-border-radius-rounded);
  font-weight: var(--font-weight-font-font-weight-regular);
  color: var(--color-foreground-foreground-inactive);
}
.tab--secondary .nav-tabs .nav-link:hover {
  background-color: var(--color-surface-surface-hover);
  color: var(--color-foreground-foreground-on-hover);
}
.tab--secondary .nav-tabs .nav-link.active {
  font-weight: var(--font-weight-font-font-weight-bold);
  color: var(--color-foreground-foreground-on-inverse-active);
  background-color: var(--color-surface-surface-active);
  border: 0;
}
.tab--primary.inverted .nav-link,
.text_color_white .tab--primary .nav-link {
  color: var(--color-foreground-foreground-inverse-inactive);
}
.tab--primary.inverted .nav-link:hover,
.text_color_white .tab--primary .nav-link:hover {
  color: var(--color-foreground-foreground-on-inverse-hover);
}
.tab--primary.inverted .nav-link.active,
.text_color_white .tab--primary .nav-link.active {
  color: var(--color-foreground-foreground-on-inverse-active);
  background-color: transparent;
}
.tab--primary.inverted .nav-link.active:before,
.text_color_white .tab--primary .nav-link.active:before {
  background-color: var(--color-border-width-border-width-on-inverse-active);
}
.tab--secondary.inverted .nav-link,
.text_color_white .tab--secondary .nav-link {
  border-color: var(--color-border-width-border-width-on-inverse);
  color: var(--color-foreground-foreground-on-inverse-active);
}
.tab--secondary.inverted .nav-link:hover,
.text_color_white .tab--secondary .nav-link:hover {
  background-color: var(--color-surface-surface-on-inverse-hover);
  color: var(--color-foreground-foreground-hover);
}
.tab--secondary.inverted .nav-link.active,
.text_color_white .tab--secondary .nav-link.active {
  background-color: var(--color-surface-surface-on-inverse-active);
  color: var(--color-foreground-foreground-active);
}