@gravity-ui/uikit/build/cjs/components/legacy/Tabs/Tabs.css

Gravity UI base styling and components

.g-tabs-legacy {
  --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);
  --_--vertical-item-height: var(--g-tabs-vertical-item-height, 18px);
}
.g-tabs-legacy_size_m {
  --_--item-height: 36px;
  --_--item-gap: 24px;
  --_--item-border-width: 2px;
}
.g-tabs-legacy_size_m .g-tabs-legacy__item-title,
.g-tabs-legacy_size_m .g-tabs-legacy__item-counter {
  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-tabs-legacy_size_l {
  --_--item-height: 40px;
  --_--item-gap: 28px;
  --_--item-border-width: 2px;
}
.g-tabs-legacy_size_l .g-tabs-legacy__item-title,
.g-tabs-legacy_size_l .g-tabs-legacy__item-counter {
  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-tabs-legacy_size_xl {
  --_--item-height: 44px;
  --_--item-gap: 32px;
  --_--item-border-width: 3px;
}
.g-tabs-legacy_size_xl .g-tabs-legacy__item-title,
.g-tabs-legacy_size_xl .g-tabs-legacy__item-counter {
  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-tabs-legacy__item {
  cursor: pointer;
  user-select: none;
  outline: none;
}
.g-tabs-legacy__item-content {
  display: flex;
  align-items: center;
  border-radius: var(--g-focus-border-radius);
}
.g-tabs-legacy__item_overflow .g-tabs-legacy__item-content {
  min-width: 0;
}
.g-tabs-legacy__item-icon {
  margin-inline-end: 8px;
}
.g-tabs-legacy__item-title {
  white-space: nowrap;
}
.g-tabs-legacy__item_overflow .g-tabs-legacy__item-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-tabs-legacy__item-counter, .g-tabs-legacy__item-label {
  margin-inline-start: 8px;
}
.g-tabs-legacy__item-icon > svg {
  display: block;
}
.g-tabs-legacy_direction_horizontal {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: inset 0 calc(var(--g-tabs-border-width, 1px) * -1) 0 0 var(--g-color-line-generic);
  overflow: hidden;
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--g-tabs-item-height, var(--_--item-height));
  border-block-end: var(--g-tabs-item-border-width, var(--_--item-border-width)) solid transparent;
  padding-block-start: var(--_--item-border-width);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:focus-visible .g-tabs-legacy__item-content {
  outline: 2px solid var(--g-color-line-focus);
  outline-offset: -2px;
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item-meta {
  display: none;
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item-title {
  color: var(--g-color-text-secondary);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item-icon, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item-counter {
  color: var(--g-color-text-hint);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active .g-tabs-legacy__item-title, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:hover .g-tabs-legacy__item-title, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:focus-visible .g-tabs-legacy__item-title {
  color: var(--g-color-text-primary);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active .g-tabs-legacy__item-icon,
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active .g-tabs-legacy__item-counter, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:hover .g-tabs-legacy__item-icon,
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:hover .g-tabs-legacy__item-counter, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:focus-visible .g-tabs-legacy__item-icon,
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item:focus-visible .g-tabs-legacy__item-counter {
  color: var(--g-color-text-secondary);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active:hover, .g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_active:focus-visible {
  border-color: var(--g-color-line-brand);
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_disabled {
  pointer-events: none;
}
.g-tabs-legacy_direction_horizontal .g-tabs-legacy__item_disabled .g-tabs-legacy__item-title {
  color: var(--g-color-text-hint);
}
.g-tabs-legacy_direction_horizontal > :not(:last-child) {
  margin-inline-end: var(--g-tabs-item-gap, var(--_--item-gap));
}
.g-tabs-legacy_direction_vertical {
  display: flex;
  flex-direction: column;
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item {
  padding: var(--_--vertical-item-padding);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item-title {
  line-height: var(--_--vertical-item-height);
  color: var(--g-color-text-primary);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item-meta {
  line-height: var(--_--vertical-item-height);
  color: var(--g-color-text-secondary);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item-icon, .g-tabs-legacy_direction_vertical .g-tabs-legacy__item-counter {
  color: var(--g-color-text-secondary);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item:hover, .g-tabs-legacy_direction_vertical .g-tabs-legacy__item:focus-visible {
  background-color: var(--g-color-base-generic-hover);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item_active {
  background-color: var(--g-color-base-selection);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item_active:hover, .g-tabs-legacy_direction_vertical .g-tabs-legacy__item_active:focus-visible {
  background-color: var(--g-color-base-selection-hover);
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item_disabled {
  pointer-events: none;
}
.g-tabs-legacy_direction_vertical .g-tabs-legacy__item_disabled .g-tabs-legacy__item-title {
  color: var(--g-color-text-secondary);
}