/* ============================================================
   03-КНОПКИ

   Одна кнопка на весь сайт - «кнопка со стрелкой». Она же в шапке,
   она же в герое, она же в форме. Меняется только раскраска
   через дополнительный класс.

   Разметка всегда такая:

     <a class="button-arrow button-arrow_red">
       <span class="button-arrow__title">текст</span>
       <span class="button-arrow__icon-wrapper">
         <span class="button-arrow__icon">
           <svg class="icon icon-arrow-prev"><use href="./sprite.svg#arrow-prev"></use></svg>
         </span>
       </span>
     </a>

   ГЛАВНЫЙ ФОКУС - РАСТУЩАЯ СТРЕЛКА.
   Стрелка внутри нарисована шире, чем окошко, в котором лежит
   (30px против 22px), а окошко обрезает лишнее (overflow: hidden).
   При наведении окошко расширяется до 30px - и хвост стрелки
   как будто вырастает. Ширина самой картинки не меняется.

   Сайт на иврите (справа налево), поэтому стрелка прижимается
   к правому краю - за это отвечают правила [lang="he"] ниже.
   ============================================================ */


/* ------------------------------------------------------------
   БАЗОВАЯ КНОПКА
   ------------------------------------------------------------ */

.button-arrow {
  display: inline-flex;
  align-items: center;
  gap: calc(14 / var(--device-size) * 100vw);
  background-color: transparent;
  color: #8f8f8f;
  cursor: pointer;
  font-size: calc(20 / var(--device-size) * 100vw);
  font-weight: 400;
  letter-spacing: calc(-1 / var(--device-size) * 100vw);
  line-height: calc(32 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .button-arrow {
    font-size: calc(18 / var(--device-size) * 100vw);
    line-height: calc(22 / var(--device-size) * 100vw);
  }
}

/* Наведение - только на устройствах с мышью и только на десктопе */
@media (min-width: 768px) and (hover: hover) {
  .button-arrow {
    transition: 0.3s ease-out;
  }

  .button-arrow:hover {
    color: #010101;
  }

  /* вот здесь стрелка и «вырастает» */
  .button-arrow:hover .button-arrow__icon {
    width: calc(30 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   ОКОШКО СО СТРЕЛКОЙ
   ------------------------------------------------------------ */

/* Внешняя обёртка держит постоянное место под стрелку,
   чтобы текст не дёргался, когда стрелка растёт */
.button-arrow__icon-wrapper {
  width: calc(30 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .button-arrow__icon-wrapper {
    width: calc(22 / var(--device-size) * 100vw);
  }
}

/* Само окошко: уже, чем картинка внутри, и обрезает её */
.button-arrow__icon {
  position: relative;
  display: block;
  width: calc(22 / var(--device-size) * 100vw);
  height: calc(12 / var(--device-size) * 100vw);
  color: #d41318;
  overflow: hidden;
  transition: 0.3s ease-out;
}

.button-arrow__icon .icon {
  position: absolute;
  display: block;
  transition: 0.8s ease-out;
}

/* Картинка стрелки - 30 в ширину, то есть шире окошка */
.button-arrow__icon .icon-arrow-prev,
.button-arrow__icon .icon-arrow-next {
  width: calc(30 / var(--device-size) * 100vw);
  height: calc(12 / var(--device-size) * 100vw);
}

/* Куда прижата стрелка внутри окошка.
   Если стрелка стоит первой - прижата к левому краю, если
   последней - к правому. */
.button-arrow__icon-wrapper:first-child .button-arrow__icon { margin-left: auto; }
.button-arrow__icon-wrapper:first-child .icon { left: 0; }
.button-arrow__icon-wrapper:last-child  .icon { right: 0; }

/* На иврите всё зеркально */
[lang="he"] .button-arrow__icon-wrapper:first-child .button-arrow__icon {
  margin-left: 0;
  margin-right: auto;
}

[lang="he"] .button-arrow__icon-wrapper:first-child .icon {
  left: auto;
  right: 0;
}

[lang="he"] .button-arrow__icon-wrapper:last-child .icon {
  left: 0;
  right: auto;
}


/* ------------------------------------------------------------
   ВАРИАНТ: КРАСНАЯ ЗАЛИТАЯ
   Кнопка «שלחו פנייה» в герое
   ------------------------------------------------------------ */

.button-arrow_red {
  height: calc(44 / var(--device-size) * 100vw);
  padding-left: calc(23 / var(--device-size) * 100vw);
  padding-right: calc(30 / var(--device-size) * 100vw);
  border-radius: calc(6 / var(--device-size) * 100vw);
  background-color: #d41318;
  color: #fff;
  letter-spacing: calc(-0.2 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .button-arrow_red {
    font-size: calc(20 / var(--device-size) * 100vw);
  }
}

.button-arrow_red .button-arrow__icon {
  color: #fff;
}


/* ------------------------------------------------------------
   ВАРИАНТ: КНОПКА ОТПРАВКИ ФОРМЫ
   Широкая, с линиями сверху и снизу
   ------------------------------------------------------------ */

.button-arrow_submit {
  justify-content: space-between;
  width: 100%;
  height: calc(64 / var(--device-size) * 100vw);
  padding: 0 calc(16 / var(--device-size) * 100vw);
  border-top: calc(1 / var(--device-size) * 100vw) solid #8f8f8f;
  border-bottom: calc(1 / var(--device-size) * 100vw) solid #8f8f8f;
  background-color: rgba(0, 0, 0, 0.05);
  color: #5a5a5a;
  font-size: calc(24 / var(--device-size) * 100vw);
  font-weight: 500;
}

/* При наведении линии краснеют. box-shadow, а не border -
   чтобы кнопка не «прыгала» из-за смены толщины рамки. */
@media (min-width: 768px) and (hover: hover) {
  .button-arrow_submit:hover {
    border-color: #d41318;
    box-shadow:
      inset 0 calc(1 / var(--device-size) * 100vw) 0 #d41318,
      inset 0 calc(-1 / var(--device-size) * 100vw) 0 #d41318;
  }
}


/* ------------------------------------------------------------
   ПРИМЕЧАНИЕ

   В разметке встречается класс button-arrow_red_outline
   (кнопка в шапке). В оригинальном CSS для него НЕТ ни одного
   правила - вся раскраска приходит от .header-button .button-arrow
   в файле 04-шапка.css. Класс оставлен как есть, чтобы разметка
   совпадала со старой, но сам по себе он ничего не делает.
   ------------------------------------------------------------ */