fix: pagination [ci visual]

Author: platon-rov

src/styles/mixins/_mixins.scss

@@ -321,6 +321,13 @@
   @content;
 }
 
+@mixin fd-flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  @content;
+}
+
 @mixin fd-inline-flex-center {
   display: inline-flex;
   justify-content: center;

src/styles/pagination.scss

@@ -8,93 +8,84 @@
 $block: #{$fd-namespace}-pagination;
 
 .#{$block} {
-
-  $fd-pagination-link-padding-x: 0.25rem;
-  $fd-pagination-padding-x: 0.5rem;
-
   @include fd-reset();
+  @include fd-flex-between();
 
   font-size: var(--sapFontSize);
+  padding: 0 1rem;
+  height: 2.75rem;
+  width: 100%;
 
-  &__total {
+  .#{$block}__per-page {
     @include fd-reset();
-
-    font-size: var(--sapFontSize);
-    color: var(--sapContent_LabelColor);
-    margin-right: $fd-pagination-padding-x;
-
-    @include fd-rtl() {
-      margin-right: 0;
-      margin-left: $fd-pagination-padding-x;
-    }
+    @include fd-flex-center();
   }
 
-  &__nav {
+  .#{$block}__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('auto', 'auto');
   }
 
-  &__more {
+  .#{$block}__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 {
+    min-width: 2.5rem;
+    text-align: center;
+
+    /** Hide arrows so the text will be centered in the input. */
 
-    &--previous,
-    &--next {
-      @include fd-reset();
-      @include fd-link();
+    /** Firefox */
+    -moz-appearance: textfield;
 
-      font-size: var(--sapFontSize);
-      padding-left: $fd-pagination-padding-x;
-      padding-right: $fd-pagination-padding-x;
+    /** WebKit/Blink */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
     }
 
-    &--previous {
-      @include fd-icon("navigation-left-arrow");
+    &-label {
+      display: none;
+    }
+  }
 
-      font-size: var(--sapFontSmallSize);
+  .#{$block}__input-label,
+  .#{$block}__per-page-label {
+    flex-shrink: 0;
+    align-self: center;
+  }
 
-      @include fd-rtl() {
-        @include fd-icon("navigation-right-arrow");
-      }
-    }
+  .#{$block}__button--mobile {
+    display: none;
+  }
+}
 
-    &--next {
-      @include fd-icon("navigation-right-arrow");
+@media (max-width: 599px) {
+  .#{$block} {
+    .#{$block}__per-page + .#{$block}__nav {
+      @include fd-set-margins-x('auto', 0);
+    }
 
-      font-size: var(--sapFontSmallSize);
+    .#{$block}__total,
+    .#{$block}__per-page-label,
+    .#{$block}__link,
+    .#{$block}__more {
+      display: none;
+    }
 
-      @include fd-rtl() {
-        @include fd-icon("navigation-left-arrow");
-      }
+    .#{$block}__button--mobile,
+    .#{$block}__input-label {
+      display: flex;
     }
   }
 }