feat: add styles for back and next buttons

Author: ElveeC

source/icons/back.svg

@@ -370,8 +370,18 @@ <h2 class="top-projects__title section__title">Крупные проекты</h2
         <div class="top-projects__description-wrapper">
           <p class="top-projects__description">Поддерживаем и развиваем долгосрочное сотрудничество</p>
           <div class="top-projects__button-wrapper">
-            <button class="top-projects__button top-projects__button--back" type="button">Назад</button>
-            <button class="top-projects__button top-projects__button--next" type="button">Вперед</button>
+            <button class="top-projects__button top-projects__button--back" type="button">
+              <svg aria-hidden="true" focusable="false" width="11" height="20">
+                <use href="icons/stack.svg#back"></use>
+              </svg>
+              <span class="visually-hidden">Назад.</span>
+            </button>
+            <button class="top-projects__button top-projects__button--next" type="button">
+              <svg aria-hidden="true" focusable="false" width="11" height="20">
+                <use href="icons/stack.svg#next"></use>
+              </svg>
+              <span class="visually-hidden">Вперёд.</span>
+            </button>
           </div>
         </div>
       </div>

source/icons/next.svg

@@ -53,15 +53,54 @@
 }
 
 .top-projects__button-wrapper {
+  display: flex;
+  gap: 16px;
+
   @media (max-width: $vp-1279) {
     display: none;
   }
 }
 
 .top-projects__button {
+  @include font-additional;
   @include transition;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  width: 69px;
+  height: 69px;
+  background: $color-reverse;
+  border-radius: 20px;
+  box-sizing: border-box;
   cursor: pointer;
+  border: none;
+
+  @media (max-width: $vp-1439) {
+    padding: 20px;
+
+    width: 60px;
+    height: 60px;
+  }
+
+  &:not(:disabled):hover {
+    @include button-hover;
+  }
+
+  &:not(:disabled):active {
+    @include button-active;
+  }
+
+  &:focus {
+    @include button-focus;
+  }
+
+  &:disabled {
+    color: $color-basic-60;
+    background-color: $color-secondary;
+    cursor: default;
+  }
 
   @media (max-width: $vp-1279) {
     display: none;

source/index.html

@@ -11,7 +11,7 @@
     color: $color-basic;
     background-color: $color-reverse;
     border-radius: 50px;
-    box-shadow: 0 0 5px $color-basic-60;
+    outline: 1px solid $color-basic-60;
   }
 }