re-configure breakpoints for pagination container queries

Author: haschek

src/components/Pagination/pagination.scss

@@ -7,6 +7,8 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 $eccgui-size-pagination-height-medium: $pt-button-height !default;
 $eccgui-size-pagination-height-small: $pt-button-height-small !default;
 $eccgui-size-pagination-height-large: $pt-button-height-large !default;
+$eccgui-size-pagination-breakpoint-wide: 32rem !default;
+$eccgui-size-pagination-breakpoint-small: 26rem !default;
 
 .#{$prefix}--pagination {
     min-block-size: $eccgui-size-pagination-height-medium;
@@ -15,8 +17,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
-        font-size: 100%;
         text-overflow: clip;
+        font-size: 100%;
     }
 }
 
@@ -137,3 +139,51 @@ span.#{$prefix}--pagination__text {
         line-height: $eccgui-size-pagination-height-large;
     }
 }
+
+// fix breakpoints for container queries
+// Carbon does not provide the option to configure that breakpoint
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+        .#{$prefix}--pagination__text {
+            display: inline-block;
+        }
+        .#{$prefix}--pagination__left > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__left > * {
+            display: none;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: none;
+        }
+
+        .#{$prefix}--pagination__items-count {
+            display: initial;
+        }
+
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+    }
+}