@inera/ids-design 8.0.0 → 8.1.0

package/components/pagination/data-pagination/data-pagination.css

@@ -86,42 +86,6 @@
   display: flex;
   margin-left: 0.5rem;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:focus,
-.ids-data-pagination .ids-data-pagination__first-page-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__first-page-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__first-page-button button:active,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus),
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus-within),
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus-visible),
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-HOVER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE) !important;
-  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
-}
-.ids-data-pagination .ids-data-pagination__first-page-button button:hover,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover) {
-  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
-  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
-}
-.ids-data-pagination .ids-data-pagination__first-page-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover):after {
-  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
-}
-.ids-data-pagination .ids-data-pagination__first-page-button button:disabled,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled) {
-  cursor: default;
-}
-.ids-data-pagination .ids-data-pagination__first-page-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled):after {
-  color: var(--IDS-ICON--DISABLED-COLOR);
-  background-color: transparent;
-}
-.ids-data-pagination .ids-data-pagination__first-page-button button:disabled:hover,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled:hover) {
-  border: 0.063rem solid transparent !important;
-  color: var(--IDS-ICON--DISABLED-COLOR);
-  background-color: transparent;
-}
 .ids-data-pagination .ids-data-pagination__first-page-button button,
 .ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button) {
   position: relative;
@@ -132,7 +96,8 @@
   background-color: transparent;
   border: 0.063rem solid transparent !important;
   border-radius: 100% !important;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
 }
 .ids-data-pagination .ids-data-pagination__first-page-button button:after,
 .ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button):after {
@@ -146,52 +111,45 @@
   content: "\e6ff";
   font-size: 1rem;
   line-height: 1rem;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__prev-button {
-  display: flex;
-  margin-left: 0.5rem;
-}
-.ids-data-pagination .ids-data-pagination__prev-button button:focus,
-.ids-data-pagination .ids-data-pagination__prev-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__prev-button button:active,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus),
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-within),
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-visible),
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-HOVER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE) !important;
-  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
-}
-.ids-data-pagination .ids-data-pagination__prev-button button:hover,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:hover,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover) {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__first-page-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover):after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:disabled,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:active,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button button:disabled,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled) {
   cursor: default;
+  pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__first-page-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled):after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover) {
-  border: 0.063rem solid transparent !important;
-  color: var(--IDS-ICON--DISABLED-COLOR);
-  background-color: transparent;
+.ids-data-pagination .ids-data-pagination__prev-button {
+  display: flex;
+  margin-left: 0.5rem;
 }
 .ids-data-pagination .ids-data-pagination__prev-button button,
 .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
@@ -203,7 +161,8 @@
   background-color: transparent;
   border: 0.063rem solid transparent !important;
   border-radius: 100% !important;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
 }
 .ids-data-pagination .ids-data-pagination__prev-button button:after,
 .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button):after {
@@ -217,52 +176,45 @@
   content: "\e937";
   font-size: 1rem;
   line-height: 1rem;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__next-button {
-  display: flex;
-  margin-left: 0.5rem;
-}
-.ids-data-pagination .ids-data-pagination__next-button button:focus,
-.ids-data-pagination .ids-data-pagination__next-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__next-button button:active,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus),
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-within),
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-visible),
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-HOVER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE) !important;
-  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
-}
-.ids-data-pagination .ids-data-pagination__next-button button:hover,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__prev-button button:hover,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover) {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__next-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__prev-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover):after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__next-button button:disabled,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled) {
+.ids-data-pagination .ids-data-pagination__prev-button button:active,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:disabled,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled) {
   cursor: default;
+  pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__next-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__prev-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled):after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
-.ids-data-pagination .ids-data-pagination__next-button button:disabled:hover,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover) {
-  border: 0.063rem solid transparent !important;
-  color: var(--IDS-ICON--DISABLED-COLOR);
-  background-color: transparent;
+.ids-data-pagination .ids-data-pagination__next-button {
+  display: flex;
+  margin-left: 0.5rem;
 }
 .ids-data-pagination .ids-data-pagination__next-button button,
 .ids-data-pagination .ids-data-pagination__next-button ::slotted(button) {
@@ -274,7 +226,8 @@
   background-color: transparent;
   border: 0.063rem solid transparent !important;
   border-radius: 100% !important;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
 }
 .ids-data-pagination .ids-data-pagination__next-button button:after,
 .ids-data-pagination .ids-data-pagination__next-button ::slotted(button):after {
@@ -288,52 +241,45 @@
   content: "\e938";
   font-size: 1rem;
   line-height: 1rem;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button {
-  display: flex;
-  margin-left: 0.5rem;
-}
-.ids-data-pagination .ids-data-pagination__last-page-button button:focus,
-.ids-data-pagination .ids-data-pagination__last-page-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__last-page-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__last-page-button button:active,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus),
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus-within),
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus-visible),
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-HOVER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE) !important;
-  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
-}
-.ids-data-pagination .ids-data-pagination__last-page-button button:hover,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__next-button button:hover,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover) {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__next-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover):after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:disabled,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled) {
+.ids-data-pagination .ids-data-pagination__next-button button:active,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button button:disabled,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled) {
   cursor: default;
+  pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__next-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled):after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:disabled:hover,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled:hover) {
-  border: 0.063rem solid transparent !important;
-  color: var(--IDS-ICON--DISABLED-COLOR);
-  background-color: transparent;
+.ids-data-pagination .ids-data-pagination__last-page-button {
+  display: flex;
+  margin-left: 0.5rem;
 }
 .ids-data-pagination .ids-data-pagination__last-page-button button,
 .ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button) {
@@ -345,7 +291,8 @@
   background-color: transparent;
   border: 0.063rem solid transparent !important;
   border-radius: 100% !important;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
 }
 .ids-data-pagination .ids-data-pagination__last-page-button button:after,
 .ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button):after {
@@ -359,10 +306,39 @@
   content: "\e6fe";
   font-size: 1rem;
   line-height: 1rem;
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:hover,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover):after {
+  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:active,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:disabled,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+  background-color: transparent;
 }

package/components/pagination/list-pagination/list-pagination-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-FONT-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE)!important;line-height:1.5rem;margin-bottom:.5rem;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;border:.063rem solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 .125rem;min-height:1.75rem;min-width:1.75rem;text-align:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden]{display:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[data-hidden-before]:before,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before{color:var(--IDS-FONT-COLOR);content:\"..\";display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.5rem;margin-left:-.188rem;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);border:.063rem solid var(--IDS-LINK--COLOR-PRESET-1__COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;border-radius:1.75rem;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:700;line-height:1.5rem;min-height:1.75rem;min-width:1.75rem;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);text-decoration:underline;text-underline-offset:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:var(--IDS-LIST-PAGINATION__CURRENT-COLOR);cursor:default;font-weight:400;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:hover{color:var(--IDS-LIST-PAGINATION__CURRENT-FOCUS-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:transparent!important;background-size:1rem 1rem;border:.063rem solid transparent!important;border-radius:1.75rem!important;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);cursor:pointer;height:1.938rem!important;position:relative;width:1.938rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);content:\"\\e937\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover:after{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-within),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled:after{color:var(--IDS-ICON--DISABLED-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-color:transparent!important;background-size:1rem 1rem;border:.063rem solid transparent!important;border-radius:1.75rem!important;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);cursor:pointer;height:1.938rem!important;position:relative;width:1.938rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover:after{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-within),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled:after{color:var(--IDS-ICON--DISABLED-COLOR)}";
+var css_248z = ".ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-FONT-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE)!important;line-height:1.5rem;margin-bottom:.5rem;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;background-color:var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);border:0;border-radius:2rem;box-sizing:border-box;color:var(--IDS-LIST-PAGINATION__COLOR);display:flex;justify-content:center;margin:0 .125rem;min-height:2rem;min-width:2rem;text-align:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden]{display:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[data-hidden-before]:before,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before{color:var(--IDS-FONT-COLOR);content:\"..\";display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.5rem;font-style:normal;font-weight:600;line-height:1.5rem;margin-left:-.188rem;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LIST-PAGINATION__COLOR);color:var(--ids-color-interactive-text-on-hover)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;border-radius:2rem;color:var(--IDS-LIST-PAGINATION__COLOR);cursor:pointer;display:block;flex-shrink:0;font-family:var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;min-height:2rem;min-width:2rem;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LIST-PAGINATION__COLOR);text-decoration:underline;text-underline-offset:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.125rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active{background-color:var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-LIST-PAGINATION--ACTIVE__COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover{background-color:var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);color:var(--IDS-LIST-PAGINATION--HOVER-COLOR);cursor:pointer;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover:after{color:var(--IDS-LIST-PAGINATION--HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current{color:var(--IDS-LIST-PAGINATION__CURRENT-COLOR);cursor:default;font-weight:400;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current:hover{cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);background-size:1rem 1rem;border:0!important;border-radius:1.75rem!important;color:var(--IDS-LIST-PAGINATION-COLOR);cursor:pointer;flex-shrink:0;height:1.9375rem!important;position:relative;width:1.9375rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-LIST-PAGINATION__COLOR);content:\"\\e937\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover{background-color:var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);color:var(--IDS-LIST-PAGINATION--HOVER-COLOR);cursor:pointer;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover:after{color:var(--IDS-LIST-PAGINATION--HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active{background-color:var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-LIST-PAGINATION--ACTIVE__COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{color:var(--IDS-LIST-PAGINATION--DISABLED-COLOR);pointer-events:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled:after{color:var(--IDS-LIST-PAGINATION--DISABLED-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-color:var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);background-size:1rem 1rem;border:0!important;border-radius:1.75rem!important;color:var(--IDS-LIST-PAGINATION-COLOR);cursor:pointer;flex-shrink:0;height:1.9375rem!important;position:relative;width:1.9375rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-LIST-PAGINATION__COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover{background-color:var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);color:var(--IDS-LIST-PAGINATION--HOVER-COLOR);cursor:pointer;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover:after{color:var(--IDS-LIST-PAGINATION--HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active{background-color:var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-LIST-PAGINATION--ACTIVE__COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{color:var(--IDS-LIST-PAGINATION--DISABLED-COLOR);pointer-events:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled:after{color:var(--IDS-LIST-PAGINATION--DISABLED-COLOR)}";
 
 var listPaginationLit = css`
   ${unsafeCSS(css_248z)}

package/components/pagination/list-pagination/list-pagination.css

@@ -41,11 +41,13 @@
   justify-content: center;
   text-align: center;
   margin: 0 0.125rem;
-  min-width: 1.75rem;
-  min-height: 1.75rem;
-  border-radius: 1.75rem;
-  border: 0.063rem solid transparent;
+  min-width: 2rem;
+  min-height: 2rem;
+  border-radius: 2rem;
+  border: 0;
   box-sizing: border-box;
+  color: var(--IDS-LIST-PAGINATION__COLOR);
+  background-color: var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden] {
   display: none;
@@ -59,54 +61,68 @@
   font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1.5rem;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.5rem;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current {
-  background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  border: 0.063rem solid var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  color: var(--ids-color-interactive-text-on-hover);
+  background-color: var(--IDS-LIST-PAGINATION__COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button {
   display: block;
-  min-width: 1.75rem;
-  min-height: 1.75rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  border: 0;
+  border-radius: 2rem;
   padding: 0 0.5rem;
   background-color: transparent;
-  border: 0;
-  border-radius: 1.75rem;
   text-align: center;
   font-family: var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);
   font-size: 1rem;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  color: var(--IDS-LIST-PAGINATION__COLOR);
+  text-decoration-color: var(--IDS-LIST-PAGINATION__COLOR);
   text-decoration: underline;
   text-underline-offset: 0.25rem;
+  flex-shrink: 0;
   cursor: pointer;
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: 0.125rem !important;
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active {
+  color: var(--IDS-LIST-PAGINATION--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover {
-  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+  cursor: pointer;
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
+  background-color: var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);
+  text-decoration: none;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover:after {
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current {
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current {
   cursor: default;
   color: var(--IDS-LIST-PAGINATION__CURRENT-COLOR);
   font-weight: 400;
   text-decoration: none;
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-within, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-visible, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:hover {
-  color: var(--IDS-LIST-PAGINATION__CURRENT-FOCUS-COLOR);
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button.ids-list-pagination__button--current:hover {
+  cursor: default;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button {
   display: flex;
@@ -117,12 +133,13 @@
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
-  height: 1.938rem !important;
-  width: 1.938rem !important;
-  background-color: transparent !important;
-  border: 0.063rem solid transparent !important;
+  height: 1.9375rem !important;
+  width: 1.9375rem !important;
+  border: 0 !important;
+  flex-shrink: 0;
   border-radius: 1.75rem !important;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  background-color: var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);
+  color: var(--IDS-LIST-PAGINATION-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button):after {
@@ -135,36 +152,42 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\e937";
   font-size: 1rem;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  color: var(--IDS-LIST-PAGINATION__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover) {
+  cursor: pointer;
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
+  background-color: var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);
+  text-decoration: none;
+}
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover):after {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-within,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus),
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-within),
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible),
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-LIST-PAGINATION--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible) {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled) {
-  cursor: default;
+  pointer-events: none;
+  color: var(--IDS-LIST-PAGINATION--DISABLED-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled):after {
-  color: var(--IDS-ICON--DISABLED-COLOR);
+  color: var(--IDS-LIST-PAGINATION--DISABLED-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button {
   display: flex;
@@ -175,12 +198,13 @@
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
-  height: 1.938rem !important;
-  width: 1.938rem !important;
-  background-color: transparent !important;
-  border: 0.063rem solid transparent !important;
+  height: 1.9375rem !important;
+  width: 1.9375rem !important;
+  border: 0 !important;
+  flex-shrink: 0;
   border-radius: 1.75rem !important;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  background-color: var(--IDS-LIST-PAGINATION__BACKGROUND-COLOR);
+  color: var(--IDS-LIST-PAGINATION-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button):after {
@@ -193,34 +217,40 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\e938";
   font-size: 1rem;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  color: var(--IDS-LIST-PAGINATION__COLOR);
   width: 1rem;
   height: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover) {
+  cursor: pointer;
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
+  background-color: var(--IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR);
+  text-decoration: none;
+}
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover):after {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-LIST-PAGINATION--HOVER-COLOR);
 }
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-within,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus),
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-within),
-.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible),
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:active) {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+  color: var(--IDS-LIST-PAGINATION--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible) {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled) {
-  cursor: default;
+  pointer-events: none;
+  color: var(--IDS-LIST-PAGINATION--DISABLED-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled:after,
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled):after {
-  color: var(--IDS-ICON--DISABLED-COLOR);
+  color: var(--IDS-LIST-PAGINATION--DISABLED-COLOR);
 }