/* Кнопка «Вернуться к чтению» — плавающая, в правом нижнем углу страниц сайта.
   Показывается не всем: разметку создаёт js/read-return.js и только тем, кто
   уже открывал читалку. Геометрия и цвета повторяют макет: рамка --line,
   подложка #f3f6f9, надпись капсом мелким кеглем. */

.nd-read-return {
  position: fixed;
  inset: auto 1rem 1rem auto;
  /* Ниже куки-баннера (z-index 20) и шапки сайта (50): согласие с куками
     важнее, перекрывать его нельзя. Чтобы кнопка при этом не пряталась под
     баннером, скрипт приподнимает её, пока баннер на экране. */
  z-index: 10;

  /* Исходное состояние — спрятана. Класс is-visible вешает скрипт: сначала
     через полсекунды после загрузки, дальше — по направлению прокрутки.
     Прячем прозрачностью и сдвигом, а не display: иначе анимации не будет,
     да и ширину кнопки в спрятанном виде уже не измерить.
     pointer-events снимаем, чтобы невидимая кнопка не перехватывала клики. */
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nd-read-return.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Высота задана числом, а не отступами сверху и снизу. Причина в надписи:
   у неё крупный наследуемый межстрочный интервал, и при выравнивании по
   содержимому строка вставала в кнопке заметно выше середины. С фиксированной
   высотой её центрирует flex, и текст с иконкой стоят ровно по оси. */
.nd-read-return-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.3125rem;
  padding: 0 1rem;
  border: 1px solid var(--line, #dfe4ea);
  border-radius: 100px;
  background-color: #f3f6f9;
  color: var(--black, #000c24);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

/* Иконка красится в цвет текста, поэтому на наведении уезжает в синий вместе
   с надписью. Одним <img> так не сделать — файл подставляется маской, а сам
   цвет даёт currentColor. */
.nd-read-return-icon {
  flex: none;
  /* Пропорции файла — 20×24, отсюда ширина 0.8334 от высоты. */
  width: 0.8334rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("/images/paper.svg") no-repeat center / contain;
  mask: url("/images/paper.svg") no-repeat center / contain;
}

/* Межстрочный интервал сбрасываем в единицу: наследуется он от body
   фиксированной величиной в 19.2px, и строка занимала бы вдвое больше
   своего кегля.

   Сдвиг вниз — оптическая поправка, без неё надпись остаётся выше середины
   даже при идеально отцентрованном строковом боксе. Причина в том, что бокс
   резервирует место под нижние выносные (у, р, ц), а надпись набрана
   капсом, и снизу это место пустует. По метрикам шрифта центр самих букв
   оказывается на 0.86px выше центра бокса при кегле 9.6px — отсюда 0.09em.
   Величина в em, чтобы поправка держалась при смене кегля. */
.nd-read-return-text {
  position: relative;
  top: 0.09em;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Наведение и клавиатурный фокус: надпись и иконка уходят в фирменный синий.
   Цвет прописан числом, а не через var(--blue): переменная объявлена в CSS
   сайта, и при отключённом или ещё не загруженном основном стиле правило
   молча теряло бы цвет. Значение то же, что у токена --blue.
   Детям цвет назначается напрямую, а не только наследованием от ссылки —
   так подсветка не зависит от того, задан ли им собственный цвет. */
.nd-read-return-btn:hover,
.nd-read-return-btn:hover .nd-read-return-text,
.nd-read-return-btn:focus-visible,
.nd-read-return-btn:focus-visible .nd-read-return-text {
  color: #0026e7;
}

.nd-read-return-btn:hover .nd-read-return-icon,
.nd-read-return-btn:focus-visible .nd-read-return-icon {
  background-color: #0026e7;
}

.nd-read-return-btn:focus-visible {
  outline: 2px solid #0026e7;
  outline-offset: 2px;
}

/* Читателям, попросившим систему убрать анимации, кнопка просто появляется
   и исчезает без сдвига и плавности. */
@media (prefers-reduced-motion: reduce) {
  .nd-read-return {
    transform: none;
    transition: none;
  }
  .nd-read-return.is-visible {
    transform: none;
  }
}