fix(styles): pagination styles update (#2912)

BREAKING CHANGE:
update pagination markup

Author: platon-rov

src/styles/pagination.scss

@@ -7,94 +7,104 @@
 
 $block: #{$fd-namespace}-pagination;
 
-.#{$block} {
+@mixin fd-pagination-mobile() {
+  .#{$block}__per-page + .#{$block}__nav {
+    @include fd-set-margins-x('auto', 0);
+  }
 
-  $fd-pagination-link-padding-x: 0.25rem;
-  $fd-pagination-padding-x: 0.5rem;
+  .#{$block}__total,
+  .#{$block}__per-page-label,
+  .#{$block}__link,
+  .#{$block}__more {
+    display: none;
+  }
 
-  @include fd-reset();
+  .#{$block}__button--mobile,
+  .#{$block}__label {
+    display: flex;
+  }
+}
 
-  font-size: var(--sapFontSize);
+.#{$block} {
+  @include fd-reset();
 
-  &__total {
-    @include fd-reset();
+  @include fd-flex-vertical-center() {
+    justify-content: space-between;
+  }
 
-    font-size: var(--sapFontSize);
-    color: var(--sapContent_LabelColor);
-    margin-right: $fd-pagination-padding-x;
+  padding: 0 1rem;
+  height: 2.75rem;
+  width: 100%;
 
-    @include fd-rtl() {
-      margin-right: 0;
-      margin-left: $fd-pagination-padding-x;
-    }
+  &__per-page {
+    @include fd-reset();
+    @include fd-flex-center();
   }
 
   &__nav {
     @include fd-reset();
-
-    display: inline-block;
-    padding-left: 0;
-    margin-left: 0;
-    list-style: none;
-    margin-bottom: 0;
+    @include fd-flex-center();
+    @include fd-set-margins-x-equal('auto');
   }
 
   &__more {
     @include fd-reset();
 
     &::before {
       content: "...";
-      color: var(--sapLinkColor);
-      font-weight: bold;
+      display: block;
+      width: 1.5rem;
+      text-align: center;
     }
   }
 
-  &__link {
-    @include fd-reset();
-    @include fd-link();
-
-    font-size: var(--sapFontSize);
-    background-color: transparent;
-    padding-left: $fd-pagination-link-padding-x;
-    padding-right: $fd-pagination-link-padding-x;
-    position: relative;
-    text-decoration: none;
-
-    @include fd-selected() {
-      color: var(--sapContent_LabelColor);
-      text-decoration: none;
-      cursor: default;
-      font-weight: bold;
-    }
+  .#{$block}__input {
+    width: auto;
+    min-width: 2.5rem;
+    text-align: center;
 
-    &--previous,
-    &--next {
-      @include fd-reset();
-      @include fd-link();
+    /** Hide arrows so the text will be centered in the input. */
 
-      font-size: var(--sapFontSize);
-      padding-left: $fd-pagination-padding-x;
-      padding-right: $fd-pagination-padding-x;
+    /** Firefox */
+    -moz-appearance: textfield;
+
+    /** WebKit/Blink */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
     }
+  }
 
-    &--previous {
-      @include fd-icon("navigation-left-arrow");
+  .#{$block}__label,
+  .#{$block}__per-page-label {
+    flex-shrink: 0;
+    align-self: center;
+  }
 
-      font-size: var(--sapFontSmallSize);
+  .#{$block}__label {
+    display: none;
+  }
 
+  .#{$block}__button {
+    [class*='sap-icon'] {
       @include fd-rtl() {
-        @include fd-icon("navigation-right-arrow");
+        transform: rotate(180deg);
       }
     }
 
-    &--next {
-      @include fd-icon("navigation-right-arrow");
+    &--mobile {
+      display: none;
+    }
+  }
 
-      font-size: var(--sapFontSmallSize);
+  &--mobile {
+    @include fd-pagination-mobile();
+  }
+}
 
-      @include fd-rtl() {
-        @include fd-icon("navigation-left-arrow");
-      }
-    }
+@media (max-width: 599px) {
+  .#{$block} {
+    @include fd-pagination-mobile();
   }
 }