.arrow-link {
   display: flex;
   gap: 8px;
   justify-content: space-between;
   align-items: center;
   line-height: 1.4;
   font-size: rem(12);

   @include _HDesktop {
      gap: 16px;
      font-size: rem(14);
   }

   &__text {
      text-transform: uppercase;
   }

   &__arrow {
      display: inline-block;
      position: relative;
      width: 32px;
      flex-shrink: 0;
      height: 32px;
      border: 0.72px solid #ffffff33;
      border-radius: 720.93px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      @include _Tablet {
         width: 40px;
         height: 40px;
      }

      @include _HDesktop {
         width: 45px;
         height: 45px;
      }

      img {
         width: 10px;
         transition: transform 0.2s cubic-bezier(0.18, -0.43, 0.9, 1.07);
         @include _Tablet {
            width: 11px;
            height: 12px;
         }
         @include _HDesktop {
            width: 12px;
            height: 14px;
         }
      }
   }
}

.arrow-link .arrow-link__arrow::after {
   content: "";
   position: absolute;
   inset: 0;
   background: url("../icons/header/arraw.svg") no-repeat center;
   transform: translate(-20px, 20px);
   transition: transform 0.2s;

   @include _HDesktop {
      transform: translate(-24px, 24px);
   }
}

/* 🔥 АНИМАЦИЯ */
.arrow-link:hover .arrow-link__arrow img {
   transform: translate(20px, -20px);

   @include _HDesktop {
      transform: translate(24px, -24px);
   }
}

.arrow-link.dark .arrow-link__arrow::after {
   background: url("../icons/header/arrow-dark.svg") no-repeat center;
}

.arrow-link:hover .arrow-link__arrow::after {
   transform: translate(0, 0);
   transition: transform 0.2s cubic-bezier(0.18, -0.43, 0.9, 1.07) 0.1s;
}

.arrow-link.dark {
   .arrow-link__arrow {
      border: 1px solid #0000001a;
   }
}
