.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-wrapper .title-wrapper {
  gap: 16px;
}
.tab-wrapper .title-wrapper img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.tab--primary .nav-tabs {
  gap: 24px;
  border-color: var(--color-border-width-border-width-inactive);
  margin-bottom: var(--space-lg);
}
.tab--primary .nav-tabs .nav-link {
  padding: var(--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-xl);
}
.tab--secondary .nav-tabs .nav-link {
  padding: 6px var(--space-lg);
  border: 1px solid var(--color-border-width-border-width-inactive);
  border-radius: var(--border-radius-rounded);
  font-weight: var(--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-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);
}
.tab--primary .heading {
  margin-bottom: var(--space-xs);
}
.tab--secondary .heading {
  margin-bottom: var(--space-lg);
}
.tab-nav {
  width: 100%;
  transition: top .45s cubic-bezier(.16, 1, .3, 1);
  margin-bottom: var(--space-2xl);
}
.tab-nav > .u-width-full {
  background-color: var(--color-background-background-subtle-neutral);
  border-bottom: 1px solid var(--color-foreground-foreground-on-inverse-inactive);
}
.tab-nav .tab-ul {
  margin-bottom: 0;
  border: 0;
}
.tab-nav .tab--primary .nav-tabs .active:before {
  height: 4px;
}