/* =========================================================
   OZEON — ФИЛЬТРЫ НОВОСТЕЙ
   ========================================================= */


/* ===== ОСНОВНЫЕ НАСТРОЙКИ ФИЛЬТРОВ ===== */

.news-filters {
  position: relative;                              /* Основа для расположения фильтров */

  left: 0;                                         /* Смещение по горизонтали */
  top: 0;                                          /* Вертикальное положение */
  right: auto;                                     /* Отступ справа */

  width: auto;                                     /* Ширина блока */
  max-width: none;                                 /* Максимальная ширина */
  min-width: auto;                                 /* Минимальная ширина */

  display: flex;                                   /* Располагаем кнопки в ряд */
  align-items: flex-start;                         /* Вертикальное выравнивание */
  justify-content: flex-start;                     /* Выравнивание по левому краю */

  gap: 25px;                                       /* Расстояние между кнопками */

  margin-top: 20px;                                /* Отступ сверху */
  margin-bottom: 0;                                /* Отступ снизу */

  font-family: Arial, sans-serif;                  /* Шрифт */
  font-size: 20px;                                 /* Размер текста */
  font-weight: 700;                                /* Толщина текста */
  font-style: normal;                              /* Стиль текста */

  color: rgba(255, 255, 255, 0.60);                /* Цвет обычного текста */
  opacity: 1;                                      /* Прозрачность */

  text-align: left;                                /* Горизонтальное выравнивание */
  line-height: 1.2;                                /* Высота строки */
  letter-spacing: 0;                               /* Расстояние между буквами */
  word-spacing: 0;                                 /* Расстояние между словами */

  text-transform: none;                            /* Регистр текста */
  visibility: visible;                             /* Видимость */
}


/* ===== КНОПКИ ФИЛЬТРОВ ===== */

.news-filter {
  position: relative;                              /* Основа для автоматической линии */

  display: inline-flex;                            /* Кнопка подстраивается под содержимое */
  flex-direction: column;                          /* Текст сверху, линия снизу */
  align-items: center;                         /* Выравнивание по левому краю */

  box-sizing: border-box;                          /* Учитываем размеры элемента */
  flex-shrink: 0;                                  /* Не сжимаем кнопку */

  padding: 0;                                      /* Без внутренних отступов */

  border: none;                                    /* Без рамки */
  outline: none;                                   /* Без стандартного контура */

  background: none;                                /* Без фона */

  font-family: inherit;                            /* Используем шрифт фильтров */
  font-size: inherit;                              /* Используем размер фильтров */
  font-weight: inherit;                            /* Используем толщину фильтров */
  font-style: inherit;                             /* Используем стиль текста */

  color: inherit;                                  /* Используем обычный цвет */

  opacity: 1;                                      /* Прозрачность */

  line-height: inherit;                            /* Высота строки */
  letter-spacing: inherit;                         /* Расстояние между буквами */
  word-spacing: inherit;                           /* Расстояние между словами */

  text-transform: inherit;                         /* Регистр текста */
  text-decoration: none;                           /* Оформление текста */
  text-shadow: none;                               /* Тень текста */

  visibility: visible;                             /* Видимость */

  cursor: pointer;                                 /* Курсор при наведении */

  white-space: nowrap;                             /* Запрещаем перенос текста */

  transition: color 0.2s ease;                    /* Плавная смена цвета */
}


/* ===== АКТИВНАЯ КНОПКА ===== */

.news-filter.active {
  color: #05fce4;                                  /* Цвет активной кнопки */
}


/* ===== НАВЕДЕНИЕ НА КНОПКУ ===== */

.news-filter:hover {
  color: #05fce4;                                  /* Цвет при наведении */
}


/* ===== ЛИНИЯ ПОД АКТИВНОЙ КНОПКОЙ ===== */

.news-filter.active::after {
  content: '';                                     /* Создаём линию */

  display: block;                                  /* Линия становится отдельным элементом */

  width: var(--filter-line-width, 0px);            /* Автоматическая ширина линии */
  height: 2px;                                     /* Высота линии */

  margin-top: 5px;                                 /* Расстояние между текстом и линией */

  background: #05fce4;                             /* Цвет линии */

  border-radius: 0;                                /* Без скругления */

  transition: width 0.2s ease;                    /* Плавное изменение ширины */
}