/*TODO: Если что-то меняешь, загляни в local/templates/g2/components/openregion/news/opendata/openregion/news.detail/.default/src/view/components/csv-tabs/styles.scss */

.tabs {
  display: grid;
}

.tabs__header {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  grid-row: 1;
  flex-wrap: wrap;
}

.tabs__label {
  position: relative;
  margin: 5px 30px 5px 0;
  padding: 0;
}

.tabs__label:last-child {
  margin-right: 0;
}

.tabs__label-button {
  background: none;
  font-size: calc(16rem / var(--initial-font-multiplier));
  color: hsl(240, 9%, 45%);
  border: 0;
  padding: 18px 0;
  cursor: pointer;
}

.tabs__label-button:hover,
.tabs__label-button:focus {
  color: var(--text-color);
}

.tabs__label::after {
  content: '';
  display: block;
  position: absolute;
  background: var(--primary-color);
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform ease 0.15s;
}

.tabs__label--active:not(:hover)::after {
  transform: scaleX(1);
}

.tabs__label--active .tabs__label-button {
  color: var(--primary-color);
}

.tabs__body {
  list-style-type: none;
  margin: 0;
  padding: 0;
  grid-row: 2;
}

.tabs__item {
  margin: 0;
  padding: 0;
  display: none;
}

.tabs__item--active {
  display: block;
}

:root.root--special .tabs__label-button {
  color: var(--special-text-color);
}

:root.root--special .tabs__label--active::after {
  background-color: var(--special-text-color);
}