@gravity-ui/uikit/build/cjs/components/tabs/TabList.css

Gravity UI base styling and components

.g-tab-list {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 var(--g-tabs-item-gap, var(--_--item-gap));
  box-shadow: inset 0 calc(var(--g-tabs-border-width, 1px) * -1) 0 0 var(--g-color-line-generic);
}
.g-tab-list_size_m {
  --_--item-height: 36px;
  --_--item-gap: 24px;
  --_--item-border-width: 2px;
}
.g-tab-list_size_m .g-tab__title,
.g-tab-list_size_m .g-tab__counter,
.g-tab-list_size_m .g-tab-more__count {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
}
.g-tab-list_size_l {
  --_--item-height: 40px;
  --_--item-gap: 28px;
  --_--item-border-width: 2px;
}
.g-tab-list_size_l .g-tab__title,
.g-tab-list_size_l .g-tab__counter,
.g-tab-list_size_l .g-tab-more__count {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-2-font-size);
  line-height: var(--g-text-body-2-line-height);
}
.g-tab-list_size_xl {
  --_--item-height: 44px;
  --_--item-gap: 32px;
  --_--item-border-width: 3px;
}
.g-tab-list_size_xl .g-tab__title,
.g-tab-list_size_xl .g-tab__counter,
.g-tab-list_size_xl .g-tab-more__count {
  font-family: var(--g-text-subheader-font-family);
  font-weight: var(--g-text-subheader-font-weight);
  font-size: var(--g-text-subheader-3-font-size);
  line-height: var(--g-text-subheader-3-line-height);
}
.g-tab-list_overflow_collapse {
  flex-wrap: nowrap;
}
.g-tab-list_overflow_scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
}