/* =========================================================
   OZEON — ДЕЙСТВИЯ НОВОСТИ
   ========================================================= */


/* ===== НИЖНЯЯ СТРОКА ===== */

.news-item__actions {
  width: 100%;                                      /* Вся ширина строки */
}


/* ===== ЛЕВАЯ ЧАСТЬ ===== */

.news-item__bottom-left {
  position: absolute;                               /* Свободное положение */

  left: 0px;                                        /* Отступ слева */
  bottom: 0px;                                      /* Отступ снизу */

  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 10px;                                        /* Расстояние между элементами */
}


/* ===== ПРАВАЯ ЧАСТЬ ===== */

.news-item__bottom-right {
  position: absolute;                               /* Свободное положение */

  right: 0px;                                       /* Отступ справа */
  bottom: 0px;                                      /* Отступ снизу */

  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 10px;                                         /* Расстояние между элементами */
}


/* ===== ОБЩИЕ ПАРАМЕТРЫ ДЕЙСТВИЙ ===== */

.news-item__views,
.news-item__favorite,
.news-item__share {
  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 5px;                                         /* Расстояние между иконкой и текстом */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 14px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.50);                 /* Обычный цвет */

  cursor: pointer;                                  /* Курсор */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== КНОПКИ ДЕЙСТВИЙ ===== */

.news-item__favorite,
.news-item__share {
  position: relative;                                /* Основа для подсказки */

  background: none;                                 /* Без фона */
  border: none;                                     /* Без рамки */
  padding: 0;                                       /* Без внутренних отступов */
}


/* ===== ОБЩИЕ ИКОНКИ ===== */

.news-item__views-icon,
.news-item__favorite-icon,
.news-item__share-icon {
  font-size: 16px;                                  /* Размер иконки */

  color: inherit;                                   /* Цвет от элемента */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== КОЛИЧЕСТВО ===== */

.news-item__favorite-count,
.news-item__share-count {
  font-size: 14px;                                  /* Размер количества */

  color: inherit;                                   /* Цвет от элемента */
}


/* ===== ПРОСМОТРЫ — НАВЕДЕНИЕ ===== */

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


/* ===== ПРОСМОТРЫ — АКТИВНОЕ СОСТОЯНИЕ ===== */

.news-item__views-icon.is-active {
  color: #3b82f6;                                   /* Цвет после просмотра */
}


/* ===== ИЗБРАННОЕ — НАВЕДЕНИЕ ===== */

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


/* ===== ИЗБРАННОЕ — АКТИВНОЕ СОСТОЯНИЕ ===== */

.news-item__favorite.is-active .news-item__favorite-icon {
  color: #fadd02;                                   /* Жёлтая звезда */
}


/* ===== ПОДСКАЗКА ИЗБРАННОГО ===== */

.news-item__favorite-tooltip {
  position: absolute;                               /* Положение подсказки */

  left: 50%;                                        /* Центр по горизонтали */
  bottom: calc(100% + 8px);                         /* Над кнопкой */

  transform: translateX(-50%);                      /* Центрирование */

  padding: 6px 10px;                                /* Внутренние отступы */

  background: rgba(0, 0, 0, 0.85);                  /* Фон */

  border: 1px solid rgba(255, 255, 255, 0.10);      /* Рамка */
  border-radius: 5px;                               /* Скругление */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 12px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина */

  color: #ffffff;                                   /* Цвет текста */

  white-space: nowrap;                              /* Без переноса */

  opacity: 0;                                       /* Скрыта */
  visibility: hidden;                               /* Скрыта */

  pointer-events: none;                             /* Не мешает нажатию */

  transition:
    opacity 200ms ease,
    visibility 200ms ease;                          /* Плавное появление */
}


/* ===== ПОДСКАЗКА ИЗБРАННОГО — НАВЕДЕНИЕ ===== */

.news-item__favorite:hover .news-item__favorite-tooltip {
  opacity: 1;                                       /* Показать */
  visibility: visible;                              /* Сделать видимой */
}


/* ===== ПОДЕЛИТЬСЯ — НАВЕДЕНИЕ ===== */

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


/* ===== ПОДСКАЗКА ПОДЕЛИТЬСЯ ===== */

.news-item__share-tooltip {
  position: absolute;                               /* Положение подсказки */

  left: 50%;                                        /* Центр по горизонтали */
  bottom: calc(100% + 8px);                         /* Над кнопкой */

  transform: translateX(-50%);                      /* Центрирование */

  padding: 6px 10px;                                /* Внутренние отступы */

  background: rgba(0, 0, 0, 0.85);                  /* Фон */

  border: 1px solid rgba(255, 255, 255, 0.10);      /* Рамка */
  border-radius: 5px;                               /* Скругление */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 12px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина */

  color: #ffffff;                                   /* Цвет текста */

  white-space: nowrap;                              /* Без переноса */

  opacity: 0;                                       /* Скрыта */
  visibility: hidden;                               /* Скрыта */

  pointer-events: none;                             /* Не мешает нажатию */

  transition:
    opacity 200ms ease,
    visibility 200ms ease;                          /* Плавное появление */
}


/* ===== ПОДСКАЗКА ПОДЕЛИТЬСЯ — НАВЕДЕНИЕ ===== */

.news-item__share:hover .news-item__share-tooltip {
  opacity: 1;                                       /* Показать */
  visibility: visible;                              /* Сделать видимой */
}

/* ===== СЕРДЕЧКО ===== */

.news-item__heart {
  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 5px;                                         /* Расстояние между сердечком и количеством */

  background: none;                                 /* Без фона */
  border: none;                                     /* Без рамки */
  padding: 0;                                       /* Без внутренних отступов */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 14px;                                  /* Размер количества */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.50);                 /* Обычный цвет */

  cursor: pointer;                                  /* Курсор */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== ИКОНКА СЕРДЕЧКА ===== */

.news-item__heart-icon {
  font-size: 16px;                                  /* Размер сердечка */
  color: inherit;                                   /* Цвет от кнопки */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== СЧЁТЧИК СЕРДЕЧКА ===== */

.news-item__heart-count {
  font-size: 14px;                                  /* Размер количества */
  color: inherit;                                   /* Цвет от кнопки */
}


/* ===== СЕРДЕЧКО — НАВЕДЕНИЕ ===== */

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


/* ===== СЕРДЕЧКО — АКТИВНОЕ СОСТОЯНИЕ ===== */

.news-item__heart.is-active .news-item__heart-icon {
  color: #bd0856;                                   /* Красное сердечко */
}

/* ===== ЛАЙК ===== */

.news-item__like {
  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 5px;                                         /* Расстояние между иконкой и количеством */

  background: none;                                 /* Без фона */
  border: none;                                     /* Без рамки */
  padding: 0;                                       /* Без внутренних отступов */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 14px;                                  /* Размер количества */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.50);                 /* Обычный цвет */

  cursor: pointer;                                  /* Курсор */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== ИКОНКА ЛАЙКА ===== */

.news-item__like-icon {
  font-size: 16px;                                  /* Размер иконки */
  color: rgba(255, 255, 255, 0.35);

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== СЧЁТЧИК ЛАЙКА ===== */

.news-item__like-count {
  font-size: 14px;                                  /* Размер количества */
  color: inherit;                                   /* Цвет от кнопки */
}


/* ===== ЛАЙК — НАВЕДЕНИЕ ===== */

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


/* ===== ЛАЙК — АКТИВНОЕ СОСТОЯНИЕ ===== */

.news-item__like.is-active .news-item__like-icon {
  color: #deb87e;                                   /* Жёлтый лайк */
}

/* ===== ДИЗЛАЙК ===== */

.news-item__dislike {
  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  gap: 5px;                                         /* Расстояние между иконкой и количеством */

  background: none;                                 /* Без фона */
  border: none;                                     /* Без рамки */
  padding: 0;                                       /* Без внутренних отступов */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 14px;                                  /* Размер количества */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.50);                 /* Цвет количества */

  cursor: pointer;                                  /* Курсор */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== ИКОНКА ДИЗЛАЙКА ===== */

.news-item__dislike-icon {
  font-size: 16px;                                  /* Размер иконки */
  color: rgba(255, 255, 255, 0.35);                 /* Более серый цвет */

  transition: color 200ms ease;                     /* Плавное изменение */
}


/* ===== СЧЁТЧИК ДИЗЛАЙКА ===== */

.news-item__dislike-count {
  font-size: 14px;                                  /* Размер количества */
  color: inherit;                                   /* Цвет от кнопки */
}


/* ===== ДИЗЛАЙК — НАВЕДЕНИЕ ===== */

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


/* ===== ДИЗЛАЙК — АКТИВНОЕ СОСТОЯНИЕ ===== */

.news-item__dislike.is-active .news-item__dislike-icon {
  color: #780220;                                   /* Бордовый дизлайк */
}