@jorilindell/hds-core 4.10.1

package/lib/components/notification/notification.css

@@ -0,0 +1,292 @@
+.hds-icon {
+  background-color: currentcolor;
+  display: inline-block;
+  height: var(--icon-size);
+  -webkit-mask-image: var(--mask-image);
+  mask-image: var(--mask-image);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: auto;
+  mask-size: auto;
+  width: var(--icon-size);
+}
+
+.hds-icon--size-xs {
+  --icon-size: var(--spacing-layout-2-xs);
+}
+
+.hds-icon--size-s {
+  --icon-size: var(--spacing-layout-xs);
+}
+
+.hds-icon--size-m {
+  --icon-size: var(--spacing-layout-s);
+}
+
+.hds-icon--size-l {
+  --icon-size: var(--spacing-layout-m);
+}
+
+.hds-icon--size-xl {
+  --icon-size: var(--spacing-layout-l);
+}
+
+[class*=hds-icon-start--]:before {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-before);
+  mask-image: var(--mask-image-before);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+[class*=hds-icon-end--]:after {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-after);
+  mask-image: var(--mask-image-after);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+.hds-icon--alert-circle-fill {
+  --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-alert-circle-fill);
+}
+
+.hds-icon-start--alert-circle-fill {
+  --mask-image-before: var(--mask-image-alert-circle-fill);
+}
+
+.hds-icon-end--alert-circle-fill {
+  --mask-image-after: var(--mask-image-alert-circle-fill);
+}
+
+.hds-icon--check-circle-fill {
+  --mask-image-check-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-check-circle-fill);
+}
+
+.hds-icon-start--check-circle-fill {
+  --mask-image-before: var(--mask-image-check-circle-fill);
+}
+
+.hds-icon-end--check-circle-fill {
+  --mask-image-after: var(--mask-image-check-circle-fill);
+}
+
+.hds-icon--error-fill {
+  --mask-image-error-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-error-fill);
+}
+
+.hds-icon-start--error-fill {
+  --mask-image-before: var(--mask-image-error-fill);
+}
+
+.hds-icon-end--error-fill {
+  --mask-image-after: var(--mask-image-error-fill);
+}
+
+.hds-icon--info-circle-fill {
+  --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-info-circle-fill);
+}
+
+.hds-icon-start--info-circle-fill {
+  --mask-image-before: var(--mask-image-info-circle-fill);
+}
+
+.hds-icon-end--info-circle-fill {
+  --mask-image-after: var(--mask-image-info-circle-fill);
+}
+
+.hds-notification {
+  --notification-background-color: var(--color-info-light);
+  --notification-border-color: var(--color-info);
+  --notification-border-width: var(--spacing-2-xs);
+  --notification-icon-color: var(--color-info);
+  --notification-color: var(--color-black-90);
+  --notification-max-width-inline: none;
+  --notification-max-width-toast: 21rem;
+  --notification-z-index-inline: auto;
+  --notification-z-index-toast: 99;
+  --notification-offset: var(--spacing-layout-s);
+  --notification-padding: var(--spacing-s);
+  background-color: var(--notification-background-color);
+  border: solid var(--notification-border-color);
+  border-width: 0 0 0 var(--notification-border-width);
+  box-sizing: border-box;
+  color: var(--notification-color);
+  max-width: var(--notification-max-width-inline);
+  padding: var(--notification-padding);
+  position: relative;
+  width: 100%;
+  z-index: var(--notification-z-index-inline);
+}
+
+.hds-notification__content {
+  display: grid;
+  grid-gap: var(--spacing-s);
+  gap: var(--spacing-s);
+}
+
+.hds-notification__label {
+  align-items: center;
+  display: flex;
+  font-size: var(--fontsize-heading-xs);
+  font-weight: bold;
+  letter-spacing: 0;
+  line-height: 24px;
+  margin-right: var(--spacing-l);
+}
+
+.hds-notification .hds-icon {
+  --icon-size: var(--spacing-layout-xs);
+}
+
+.hds-notification__label > .hds-icon {
+  color: var(--notification-icon-color);
+  flex: none;
+  margin-right: var(--spacing-2-xs);
+}
+
+.hds-notification__body {
+  font-size: var(--fontsize-body-s);
+  line-height: 24px;
+}
+
+.hds-notification__close-button {
+  --notification-close-button-offset: var(--spacing-s);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  right: var(--notification-close-button-offset);
+  top: var(--notification-close-button-offset);
+}
+
+.hds-notification__close-button:focus {
+  box-shadow: 0 0 0 3px var(--color-focus-outline);
+}
+
+.hds-notification--small {
+  --notification-padding: var(--spacing-2-xs);
+}
+
+.hds-notification--small .hds-notification__content {
+  display: flex;
+  grid-gap: 0;
+  gap: 0;
+}
+
+.hds-notification--small .hds-notification__label {
+  margin-right: 0;
+}
+
+.hds-notification--small .hds-notification__body {
+  margin-right: var(--spacing-l);
+}
+
+.hds-notification--small .hds-notification__close-button {
+  --notification-close-button-offset: var(--spacing-2-xs);
+}
+
+.hds-notification--large {
+  --notification-padding: var(--spacing-l);
+}
+
+.hds-notification--large .hds-notification__label {
+  margin-right: 0;
+}
+
+.hds-notification--large .hds-notification__close-button {
+  --notification-close-button-offset: var(--spacing-2-xs);
+}
+
+.hds-notification--top-left, .hds-notification--top-center, .hds-notification--top-right, .hds-notification--bottom-left, .hds-notification--bottom-center, .hds-notification--bottom-right {
+  border-width: var(--notification-border-width) 0 0;
+  max-width: var(--notification-max-width-toast);
+  position: fixed;
+  width: calc(100% - var(--spacing-l));
+  z-index: var(--notification-z-index-toast);
+}
+
+.hds-notification--top-left {
+  left: var(--notification-offset);
+  top: var(--notification-offset);
+}
+
+.hds-notification--top-center {
+  left: 50%;
+  top: var(--notification-offset);
+  transform: translateX(-50%);
+}
+
+.hds-notification--top-right {
+  right: var(--notification-offset);
+  top: var(--notification-offset);
+}
+
+.hds-notification--bottom-left {
+  bottom: var(--notification-offset);
+  left: var(--notification-offset);
+}
+
+.hds-notification--bottom-center {
+  bottom: var(--notification-offset);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.hds-notification--bottom-right {
+  bottom: var(--notification-offset);
+  right: var(--notification-offset);
+}
+
+@media only screen and (max-width: 765.98px) {
+  .hds-notification {
+    --notification-offset: var(--spacing-s);
+  }
+}
+
+.hds-notification--success {
+  --notification-background-color: var(--color-success-light);
+  --notification-border-color: var(--color-success);
+  --notification-icon-color: var(--color-success);
+}
+
+.hds-notification--alert {
+  --notification-background-color: var(--color-alert-light);
+  --notification-border-color: var(--color-alert-dark);
+  --notification-icon-color: var(--color-alert-dark);
+}
+
+.hds-notification--error {
+  --notification-background-color: var(--color-error-light);
+  --notification-border-color: var(--color-error);
+  --notification-icon-color: var(--color-error);
+}
+
+.hds-notification--box-shadow {
+  box-shadow: var(--box-shadow-l);
+}

package/lib/components/notification/notification.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/notification/notification.scss","../../../src/icons/alert-circle-fill.css","../../../src/icons/check-circle-fill.css","../../../src/icons/error-fill.css","../../../src/icons/info-circle-fill.css","../../../src/utils/_bem.scss","../../../src/components/notification/_notification-mixin.scss"],"names":[],"mappings":"AAAA;ECCA,8BDAE;EACA,qBAAA;EACA,wBAAA;EACA,qCAAA;EACA,6BAAA;EACA,6BAAA;EACA,qBAAA;EACA,8BAAA;EACA,sBAAA;EACA,uBAAA;EACA,eAAA;EACA,uBAAA;ACCF;;ADEA;EACE,uCAAA;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,4CAAA;EACA,oCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,2CAAA;EACA,mCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;AC3DA;EACE,yYAAA;EACA,iDAAA;AD8DF;;AC3DA;EACE,wDAAA;AD8DF;;AC3DA;EACE,uDAAA;AD8DF;;AExEA;EACE,yZAAA;EACA,iDAAA;AF2EF;;AExEA;EACE,wDAAA;AF2EF;;AExEA;EACE,uDAAA;AF2EF;;AGrFA;EACE,igBAAA;EACA,0CAAA;AHwFF;;AGrFA;EACE,iDAAA;AHwFF;;AGrFA;EACE,gDAAA;AHwFF;;AIlGA;EACE,gjBAAA;EACA,gDAAA;AJqGF;;AIlGA;EACE,uDAAA;AJqGF;;AIlGA;EACE,sDAAA;AJqGF;;AK3BM;EC5EJ,wDAAA;EACA,8CAAA;EACA,gDAAA;EACA,4CAAA;EACA,2CAAA;EACA,qCAAA;EACA,qCAAA;EACA,mCAAA;EACA,gCAAA;EACA,8CAAA;EACA,wCAAA;EAEA,sDAAA;EACA,8CAAA;EACA,oDAAA;EACA,sBAAA;EACA,gCAAA;EACA,+CAAA;EACA,oCAAA;EACA,kBAAA;EACA,WAAA;EACA,2CAAA;AN0GF;;AMxGE;EACE,aAAA;EACA,0BAAA;EAAA,qBAAA;AN0GJ;;AMvGE;EACE,mBAAA;EACA,aAAA;EACA,qCAAA;EACA,iBAAA;EACA,iBAAA;EACA,iBAAA;EACA,8BAAA;ANyGJ;;AMtGE;EACE,qCAAA;ANwGJ;;AMrGE;EACE,qCAAA;EACA,UAAA;EACA,iCAAA;ANuGJ;;AMpGE;EACE,iCAAA;EACA,iBAAA;ANsGJ;;AMlGE;EACE,oDAAA;EAEA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,aAAA;EACA,UAAA;EACA,kBAAA;EACA,8CAAA;EACA,4CAAA;ANmGJ;;AMhGE;EACE,gDAAA;ANkGJ;;AM5FE;EACE,2CAAA;AN+FJ;;AM5FE;EACE,aAAA;EACA,WAAA;EAAA,MAAA;AN8FJ;;AM3FE;EACE,eAAA;AN6FJ;;AM1FE;EACE,8BAAA;AN4FJ;;AMzFE;EACE,uDAAA;AN2FJ;;AMtFE;EACE,wCAAA;ANyFJ;;AMtFE;EACE,eAAA;ANwFJ;;AMrFE;EACE,uDAAA;ANuFJ;;AMlFE;EAME,kDAAA;EACA,8CAAA;EACA,eAAA;EACA,oCAAA;EACA,0CAAA;ANgFJ;;AM7EE;EACE,gCAAA;EACA,+BAAA;AN+EJ;;AM5EE;EACE,SAAA;EACA,+BAAA;EACA,2BAAA;AN8EJ;;AM3EE;EACE,iCAAA;EACA,+BAAA;AN6EJ;;AM1EE;EACE,kCAAA;EACA,gCAAA;AN4EJ;;AMzEE;EACE,kCAAA;EACA,SAAA;EACA,2BAAA;AN2EJ;;AMxEE;EACE,kCAAA;EACA,iCAAA;AN0EJ;;AMvEE;EACE;IACE,uCAAA;ENyEJ;AACF;;AMpEE;EACE,2DAAA;EACA,iDAAA;EACA,+CAAA;ANuEJ;;AMlEE;EACE,yDAAA;EACA,oDAAA;EACA,kDAAA;ANqEJ;;AMhEE;EACE,yDAAA;EACA,+CAAA;EACA,6CAAA;ANmEJ;;AM9DE;EACE,+BAAA;ANiEJ","file":"notification.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use './notification-mixin' as *;\n@include notification;\n",".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n",".hds-icon--check-circle-fill {\n  --mask-image-check-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-start--check-circle-fill {\n  --mask-image-before: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-end--check-circle-fill {\n  --mask-image-after: var(--mask-image-check-circle-fill);\n}\n",".hds-icon--error-fill {\n  --mask-image-error-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-error-fill);\n}\n\n.hds-icon-start--error-fill {\n  --mask-image-before: var(--mask-image-error-fill);\n}\n\n.hds-icon-end--error-fill {\n  --mask-image-after: var(--mask-image-error-fill);\n}\n",".hds-icon--info-circle-fill {\n  --mask-image-info-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-start--info-circle-fill {\n  --mask-image-before: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-end--info-circle-fill {\n  --mask-image-after: var(--mask-image-info-circle-fill);\n}\n","@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use '../../utils/bem' as BemUtil;\n@use '../../icons/icon';\n@use '../../icons/alert-circle-fill';\n@use '../../icons/check-circle-fill';\n@use '../../icons/error-fill';\n@use '../../icons/info-circle-fill';\n\n@mixin base {\n  --notification-background-color: var(--color-info-light);\n  --notification-border-color: var(--color-info);\n  --notification-border-width: var(--spacing-2-xs);\n  --notification-icon-color: var(--color-info);\n  --notification-color: var(--color-black-90);\n  --notification-max-width-inline: none;\n  --notification-max-width-toast: 21rem;\n  --notification-z-index-inline: auto;\n  --notification-z-index-toast: 99;\n  --notification-offset: var(--spacing-layout-s);\n  --notification-padding: var(--spacing-s);\n\n  background-color: var(--notification-background-color);\n  border: solid var(--notification-border-color);\n  border-width: 0 0 0 var(--notification-border-width);\n  box-sizing: border-box;\n  color: var(--notification-color);\n  max-width: var(--notification-max-width-inline);\n  padding: var(--notification-padding);\n  position: relative;\n  width: 100%;\n  z-index: var(--notification-z-index-inline);\n\n  &__content {\n    display: grid;\n    gap: var(--spacing-s);\n  }\n\n  &__label {\n    align-items: center;\n    display: flex;\n    font-size: var(--fontsize-heading-xs);\n    font-weight: bold;\n    letter-spacing: 0;\n    line-height: 24px;\n    margin-right: var(--spacing-l);\n  }\n\n  & .hds-icon {\n    --icon-size: var(--spacing-layout-xs);\n  }\n\n  &__label > .hds-icon {\n    color: var(--notification-icon-color);\n    flex: none;\n    margin-right: var(--spacing-2-xs);\n  }\n\n  &__body {\n    font-size: var(--fontsize-body-s);\n    line-height: 24px;\n  }\n\n\n  &__close-button {\n    --notification-close-button-offset: var(--spacing-s);\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    outline: none;\n    padding: 0;\n    position: absolute;\n    right: var(--notification-close-button-offset);\n    top: var(--notification-close-button-offset);\n  }\n\n  &__close-button:focus {\n    box-shadow: 0 0 0 3px var(--color-focus-outline);\n  }\n}\n\n\n@mixin small {\n  &--small {\n    --notification-padding: var(--spacing-2-xs);\n  }\n\n  &--small &__content {\n    display: flex;\n    gap: 0;\n  }\n\n  &--small &__label {\n    margin-right: 0;\n  }\n\n  &--small &__body {\n    margin-right: var(--spacing-l);\n  }\n\n  &--small &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin large {\n  &--large {\n    --notification-padding: var(--spacing-l);\n  }\n\n  &--large &__label {\n    margin-right: 0;\n  }\n\n  &--large &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin toast {\n  &--top-left,\n  &--top-center,\n  &--top-right,\n  &--bottom-left,\n  &--bottom-center,\n  &--bottom-right {\n    border-width: var(--notification-border-width) 0 0;\n    max-width: var(--notification-max-width-toast);\n    position: fixed;\n    width: calc(100% - var(--spacing-l));\n    z-index: var(--notification-z-index-toast);\n  }\n\n  &--top-left {\n    left: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--top-center {\n    left: 50%;\n    top: var(--notification-offset);\n    transform: translateX(-50%);\n  }\n\n  &--top-right {\n    right: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--bottom-left {\n    bottom: var(--notification-offset);\n    left: var(--notification-offset);\n  }\n\n  &--bottom-center {\n    bottom: var(--notification-offset);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &--bottom-right {\n    bottom: var(--notification-offset);\n    right: var(--notification-offset);\n  }\n\n  @media only screen and (max-width: 765.98px) {\n    & {\n      --notification-offset: var(--spacing-s);\n    }\n  }\n}\n\n@mixin success {\n  &--success {\n    --notification-background-color: var(--color-success-light);\n    --notification-border-color: var(--color-success);\n    --notification-icon-color: var(--color-success);\n  }\n}\n\n@mixin alert {\n  &--alert {\n    --notification-background-color: var(--color-alert-light);\n    --notification-border-color: var(--color-alert-dark);\n    --notification-icon-color: var(--color-alert-dark);\n  }\n}\n\n@mixin error {\n  &--error {\n    --notification-background-color: var(--color-error-light);\n    --notification-border-color: var(--color-error);\n    --notification-icon-color: var(--color-error);\n  }\n}\n\n@mixin box-shadow {\n  &--box-shadow {\n    box-shadow: var(--box-shadow-l);\n  }\n}\n\n@mixin notification(\n  $all: true,\n  $base: false,\n  $small: false,\n  $large: false,\n  $toast: false,\n  $success: false,\n  $alert: false,\n  $error: false,\n  $box-shadow: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'notification';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $large {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include large;\n    }\n  }\n\n  @if $all or $toast {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include toast;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $alert {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include alert;\n    }\n  }\n\n  @if $all or $error {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include error;\n    }\n  }\n\n  @if $all or $box-shadow {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include box-shadow;\n    }\n  }\n\n}"]}

package/lib/components/notification/notification.min.css

@@ -0,0 +1 @@
+.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}.hds-icon--check-circle-fill{--mask-image-check-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-check-circle-fill)}.hds-icon-start--check-circle-fill{--mask-image-before:var(--mask-image-check-circle-fill)}.hds-icon-end--check-circle-fill{--mask-image-after:var(--mask-image-check-circle-fill)}.hds-icon--error-fill{--mask-image-error-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-error-fill)}.hds-icon-start--error-fill{--mask-image-before:var(--mask-image-error-fill)}.hds-icon-end--error-fill{--mask-image-after:var(--mask-image-error-fill)}.hds-icon--info-circle-fill{--mask-image-info-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-info-circle-fill)}.hds-icon-start--info-circle-fill{--mask-image-before:var(--mask-image-info-circle-fill)}.hds-icon-end--info-circle-fill{--mask-image-after:var(--mask-image-info-circle-fill)}.hds-notification{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.hds-notification__content{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.hds-notification__label{align-items:center;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:0;line-height:24px;margin-right:var(--spacing-l)}.hds-notification .hds-icon{--icon-size:var(--spacing-layout-xs)}.hds-notification__label>.hds-icon{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.hds-notification__body{font-size:var(--fontsize-body-s);line-height:24px}.hds-notification__close-button{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.hds-notification__close-button:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.hds-notification--small{--notification-padding:var(--spacing-2-xs)}.hds-notification--small .hds-notification__content{display:flex;grid-gap:0;gap:0}.hds-notification--small .hds-notification__label{margin-right:0}.hds-notification--small .hds-notification__body{margin-right:var(--spacing-l)}.hds-notification--small .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--large{--notification-padding:var(--spacing-l)}.hds-notification--large .hds-notification__label{margin-right:0}.hds-notification--large .hds-notification__close-button{--notification-close-button-offset:var(--spacing-2-xs)}.hds-notification--bottom-center,.hds-notification--bottom-left,.hds-notification--bottom-right,.hds-notification--top-center,.hds-notification--top-left,.hds-notification--top-right{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.hds-notification--top-left{left:var(--notification-offset);top:var(--notification-offset)}.hds-notification--top-center{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.hds-notification--top-right{right:var(--notification-offset);top:var(--notification-offset)}.hds-notification--bottom-left{bottom:var(--notification-offset);left:var(--notification-offset)}.hds-notification--bottom-center{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.hds-notification--bottom-right{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.hds-notification{--notification-offset:var(--spacing-s)}}.hds-notification--success{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.hds-notification--alert{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.hds-notification--error{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.hds-notification--box-shadow{box-shadow:var(--box-shadow-l)}

package/lib/components/notification/notification.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/notification/notification.scss","../../../src/icons/alert-circle-fill.css","../../../src/icons/check-circle-fill.css","../../../src/icons/error-fill.css","../../../src/icons/info-circle-fill.css","../../../src/utils/_bem.scss","../../../src/components/notification/_notification-mixin.scss"],"names":[],"mappings":"AAAA,UCCA,6BDAE,CACA,oBAAA,CACA,uBAAA,CACA,oCAAA,CACA,4BAAA,CACA,4BAAA,CACA,oBAAA,CACA,6BAAA,CACA,qBAAA,CACA,sBAAA,CACA,cAAA,CACA,sBCCF,CDEA,mBACE,sCCCF,CDEA,kBACE,oCCCF,CDEA,kBACE,mCCCF,CDEA,kBACE,mCCCF,CDEA,mBACE,mCCCF,CDEA,iCAKE,2CAAA,CACA,mCCKF,CDEA,+DAZE,6BAAA,CACA,UAAA,CACA,mBAAA,CACA,4BAAA,CAGA,4BAAA,CAAA,oBAAA,CACA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CACA,2BCcF,CDXA,8BAKE,0CAAA,CACA,kCCKF,CC3DA,6BACE,4RAAA,CACA,gDD8DF,CC3DA,mCACE,uDD8DF,CC3DA,iCACE,sDD8DF,CExEA,6BACE,ySAAA,CACA,gDF2EF,CExEA,mCACE,uDF2EF,CExEA,iCACE,sDF2EF,CGrFA,sBACE,wZAAA,CACA,yCHwFF,CGrFA,4BACE,gDHwFF,CGrFA,0BACE,+CHwFF,CIlGA,4BACE,uVAAA,CACA,+CJqGF,CIlGA,kCACE,sDJqGF,CIlGA,gCACE,qDJqGF,CK3BM,kBC5EJ,uDAAA,CACA,6CAAA,CACA,+CAAA,CACA,2CAAA,CACA,0CAAA,CACA,oCAAA,CACA,oCAAA,CACA,kCAAA,CACA,+BAAA,CACA,6CAAA,CACA,uCAAA,CAEA,qDAAA,CACA,6CAAA,CACA,kDAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,kBAAA,CACA,qBAAA,CACA,+BAAA,CACA,8CAAA,CACA,mCAAA,CACA,iBAAA,CACA,UAAA,CACA,0CN0GF,CMxGE,2BACE,YAAA,CACA,yBAAA,CAAA,oBN0GJ,CMvGE,yBACE,kBAAA,CACA,YAAA,CACA,oCAAA,CACA,eAAA,CACA,gBAAA,CACA,gBAAA,CACA,6BNyGJ,CMtGE,4BACE,oCNwGJ,CMrGE,mCACE,oCAAA,CACA,SAAA,CACA,gCNuGJ,CMpGE,wBACE,gCAAA,CACA,gBNsGJ,CMlGE,gCACE,mDAAA,CAEA,eAAA,CACA,WAAA,CACA,cAAA,CACA,YAAA,CACA,YAAA,CACA,SAAA,CACA,iBAAA,CACA,6CAAA,CACA,2CNmGJ,CMhGE,sCACE,+CNkGJ,CM5FE,yBACE,0CN+FJ,CM5FE,oDACE,YAAA,CACA,UAAA,CAAA,KN8FJ,CM3FE,kDACE,cN6FJ,CM1FE,iDACE,6BN4FJ,CMzFE,yDACE,sDN2FJ,CMtFE,yBACE,uCNyFJ,CMtFE,kDACE,cNwFJ,CMrFE,yDACE,sDNuFJ,CMlFE,uLAME,mBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,iDAAA,CACA,6CAAA,CACA,cAAA,CACA,mCAAA,CACA,yCNgFJ,CM7EE,4BACE,+BAAA,CACA,8BN+EJ,CM5EE,8BACE,QAAA,CACA,8BAAA,CACA,0BN8EJ,CM3EE,6BACE,gCAAA,CACA,8BN6EJ,CM1EE,+BACE,iCAAA,CACA,+BN4EJ,CMzEE,iCACE,iCAAA,CACA,QAAA,CACA,0BN2EJ,CMxEE,gCACE,iCAAA,CACA,gCN0EJ,CMvEE,4CACE,kBACE,sCNyEJ,CACF,CMpEE,2BACE,0DAAA,CACA,gDAAA,CACA,8CNuEJ,CMlEE,yBACE,wDAAA,CACA,mDAAA,CACA,iDNqEJ,CMhEE,yBACE,wDAAA,CACA,8CAAA,CACA,4CNmEJ,CM9DE,8BACE,8BNiEJ","file":"notification.min.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use './notification-mixin' as *;\n@include notification;\n",".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n",".hds-icon--check-circle-fill {\n  --mask-image-check-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-start--check-circle-fill {\n  --mask-image-before: var(--mask-image-check-circle-fill);\n}\n\n.hds-icon-end--check-circle-fill {\n  --mask-image-after: var(--mask-image-check-circle-fill);\n}\n",".hds-icon--error-fill {\n  --mask-image-error-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-error-fill);\n}\n\n.hds-icon-start--error-fill {\n  --mask-image-before: var(--mask-image-error-fill);\n}\n\n.hds-icon-end--error-fill {\n  --mask-image-after: var(--mask-image-error-fill);\n}\n",".hds-icon--info-circle-fill {\n  --mask-image-info-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-start--info-circle-fill {\n  --mask-image-before: var(--mask-image-info-circle-fill);\n}\n\n.hds-icon-end--info-circle-fill {\n  --mask-image-after: var(--mask-image-info-circle-fill);\n}\n","@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use '../../utils/bem' as BemUtil;\n@use '../../icons/icon';\n@use '../../icons/alert-circle-fill';\n@use '../../icons/check-circle-fill';\n@use '../../icons/error-fill';\n@use '../../icons/info-circle-fill';\n\n@mixin base {\n  --notification-background-color: var(--color-info-light);\n  --notification-border-color: var(--color-info);\n  --notification-border-width: var(--spacing-2-xs);\n  --notification-icon-color: var(--color-info);\n  --notification-color: var(--color-black-90);\n  --notification-max-width-inline: none;\n  --notification-max-width-toast: 21rem;\n  --notification-z-index-inline: auto;\n  --notification-z-index-toast: 99;\n  --notification-offset: var(--spacing-layout-s);\n  --notification-padding: var(--spacing-s);\n\n  background-color: var(--notification-background-color);\n  border: solid var(--notification-border-color);\n  border-width: 0 0 0 var(--notification-border-width);\n  box-sizing: border-box;\n  color: var(--notification-color);\n  max-width: var(--notification-max-width-inline);\n  padding: var(--notification-padding);\n  position: relative;\n  width: 100%;\n  z-index: var(--notification-z-index-inline);\n\n  &__content {\n    display: grid;\n    gap: var(--spacing-s);\n  }\n\n  &__label {\n    align-items: center;\n    display: flex;\n    font-size: var(--fontsize-heading-xs);\n    font-weight: bold;\n    letter-spacing: 0;\n    line-height: 24px;\n    margin-right: var(--spacing-l);\n  }\n\n  & .hds-icon {\n    --icon-size: var(--spacing-layout-xs);\n  }\n\n  &__label > .hds-icon {\n    color: var(--notification-icon-color);\n    flex: none;\n    margin-right: var(--spacing-2-xs);\n  }\n\n  &__body {\n    font-size: var(--fontsize-body-s);\n    line-height: 24px;\n  }\n\n\n  &__close-button {\n    --notification-close-button-offset: var(--spacing-s);\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    outline: none;\n    padding: 0;\n    position: absolute;\n    right: var(--notification-close-button-offset);\n    top: var(--notification-close-button-offset);\n  }\n\n  &__close-button:focus {\n    box-shadow: 0 0 0 3px var(--color-focus-outline);\n  }\n}\n\n\n@mixin small {\n  &--small {\n    --notification-padding: var(--spacing-2-xs);\n  }\n\n  &--small &__content {\n    display: flex;\n    gap: 0;\n  }\n\n  &--small &__label {\n    margin-right: 0;\n  }\n\n  &--small &__body {\n    margin-right: var(--spacing-l);\n  }\n\n  &--small &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin large {\n  &--large {\n    --notification-padding: var(--spacing-l);\n  }\n\n  &--large &__label {\n    margin-right: 0;\n  }\n\n  &--large &__close-button {\n    --notification-close-button-offset: var(--spacing-2-xs);\n  }\n}\n\n@mixin toast {\n  &--top-left,\n  &--top-center,\n  &--top-right,\n  &--bottom-left,\n  &--bottom-center,\n  &--bottom-right {\n    border-width: var(--notification-border-width) 0 0;\n    max-width: var(--notification-max-width-toast);\n    position: fixed;\n    width: calc(100% - var(--spacing-l));\n    z-index: var(--notification-z-index-toast);\n  }\n\n  &--top-left {\n    left: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--top-center {\n    left: 50%;\n    top: var(--notification-offset);\n    transform: translateX(-50%);\n  }\n\n  &--top-right {\n    right: var(--notification-offset);\n    top: var(--notification-offset);\n  }\n\n  &--bottom-left {\n    bottom: var(--notification-offset);\n    left: var(--notification-offset);\n  }\n\n  &--bottom-center {\n    bottom: var(--notification-offset);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &--bottom-right {\n    bottom: var(--notification-offset);\n    right: var(--notification-offset);\n  }\n\n  @media only screen and (max-width: 765.98px) {\n    & {\n      --notification-offset: var(--spacing-s);\n    }\n  }\n}\n\n@mixin success {\n  &--success {\n    --notification-background-color: var(--color-success-light);\n    --notification-border-color: var(--color-success);\n    --notification-icon-color: var(--color-success);\n  }\n}\n\n@mixin alert {\n  &--alert {\n    --notification-background-color: var(--color-alert-light);\n    --notification-border-color: var(--color-alert-dark);\n    --notification-icon-color: var(--color-alert-dark);\n  }\n}\n\n@mixin error {\n  &--error {\n    --notification-background-color: var(--color-error-light);\n    --notification-border-color: var(--color-error);\n    --notification-icon-color: var(--color-error);\n  }\n}\n\n@mixin box-shadow {\n  &--box-shadow {\n    box-shadow: var(--box-shadow-l);\n  }\n}\n\n@mixin notification(\n  $all: true,\n  $base: false,\n  $small: false,\n  $large: false,\n  $toast: false,\n  $success: false,\n  $alert: false,\n  $error: false,\n  $box-shadow: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'notification';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $large {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include large;\n    }\n  }\n\n  @if $all or $toast {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include toast;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $alert {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include alert;\n    }\n  }\n\n  @if $all or $error {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include error;\n    }\n  }\n\n  @if $all or $box-shadow {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include box-shadow;\n    }\n  }\n\n}"]}

package/lib/components/pagination/pagination.css

@@ -0,0 +1,189 @@
+.hds-icon {
+  background-color: currentcolor;
+  display: inline-block;
+  height: var(--icon-size);
+  -webkit-mask-image: var(--mask-image);
+  mask-image: var(--mask-image);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: auto;
+  mask-size: auto;
+  width: var(--icon-size);
+}
+
+.hds-icon--size-xs {
+  --icon-size: var(--spacing-layout-2-xs);
+}
+
+.hds-icon--size-s {
+  --icon-size: var(--spacing-layout-xs);
+}
+
+.hds-icon--size-m {
+  --icon-size: var(--spacing-layout-s);
+}
+
+.hds-icon--size-l {
+  --icon-size: var(--spacing-layout-m);
+}
+
+.hds-icon--size-xl {
+  --icon-size: var(--spacing-layout-l);
+}
+
+[class*=hds-icon-start--]:before {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-before);
+  mask-image: var(--mask-image-before);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+[class*=hds-icon-end--]:after {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-after);
+  mask-image: var(--mask-image-after);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+.hds-icon--angle-right {
+  --mask-image-angle-right: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-angle-right);
+}
+
+.hds-icon-start--angle-right {
+  --mask-image-before: var(--mask-image-angle-right);
+}
+
+.hds-icon-end--angle-right {
+  --mask-image-after: var(--mask-image-angle-right);
+}
+
+.hds-icon--angle-left {
+  --mask-image-angle-left: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-angle-left);
+}
+
+.hds-icon-start--angle-left {
+  --mask-image-before: var(--mask-image-angle-left);
+}
+
+.hds-icon-end--angle-left {
+  --mask-image-after: var(--mask-image-angle-left);
+}
+
+.hds-pagination-container {
+  text-align: center;
+}
+
+.hds-pagination {
+  display: inline-block; /* Allows centering */
+  font-size: var(--fontsize-body-m);
+  font-weight: bold;
+  line-height: var(--lineheight-l);
+  position: relative; /* Enables position absolute for btn--next */
+  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */
+  --active-page-background-color: var(--color-black);
+  --link-height: 40px;
+}
+
+/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,
+we can not use this position for the actual button as it's in incorrect source order for tabbing */
+
+.hds-pagination:before {
+  content: attr(data-next); /* Trick to keep floating element same size as btn--next */
+  content: attr(data-next)/""; /* Removes this pseudo-element from screen readers where supported */
+  display: block;
+  float: right; /* Floated pseudo-element wraps the inline ul around it */
+  line-height: 56px;
+  padding-left: 100px;
+  speak: never; /* Removes this pseudo-element from screen readers where supported */
+  visibility: hidden;
+}
+
+.hds-pagination .hds-pagination__button-prev {
+  float: left;
+  margin-right: 8px;
+  transform: scaleY(-1); /* Flip the element back from upside down */
+  white-space: nowrap;
+}
+
+.hds-pagination .hds-pagination__button-next {
+  position: absolute;
+  right: 0;
+  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */
+  transform: scaleY(-1); /* Flip the element back from upside down */
+  white-space: nowrap;
+}
+
+.hds-pagination__pages {
+  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */
+  flex-wrap: wrap; /* Allow wrapping of the li-elements */
+  grid-gap: var(--spacing-2-xs);
+  gap: var(--spacing-2-xs);
+  justify-content: center; /* Center the li-elements */
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 8px;
+  padding: 0;
+  transform: scaleY(-1); /* Flip the element back from upside down */
+}
+
+.hds-pagination__item-link {
+  align-items: center;
+  border-radius: 21px;
+  color: var(--color-black-90);
+  display: flex;
+  height: var(--link-height);
+  justify-content: center;
+  min-width: 32px;
+  padding-left: var(--spacing-3-xs);
+  padding-right: var(--spacing-3-xs);
+  text-decoration: none;
+}
+
+.hds-pagination__item-link:hover {
+  text-decoration: underline;
+}
+
+.hds-pagination__item-link:focus, .hds-pagination__item-link:active {
+  outline: solid var(--color-focus-outline) 3px;
+  outline-offset: 1px;
+}
+
+.hds-pagination__item-link.hds-pagination__item-link--active {
+  background-color: var(--active-page-background-color);
+  color: var(--color-white);
+}
+
+.hds-pagination__item-link.hds-pagination__item-link--active:hover {
+  text-decoration: none;
+}
+
+.hds-pagination__item-ellipsis {
+  align-items: center;
+  color: var(--color-black-90);
+  display: flex;
+  height: var(--link-height);
+  justify-content: center;
+  width: 40px;
+}

package/lib/components/pagination/pagination.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/pagination/pagination.css","../../../src/icons/angle-right.css","../../../src/icons/angle-left.css","../../../src/components/pagination/pagination.css%23sass"],"names":[],"mappings":"AAAA;ECCA,8BAAA;EACA,qBAAA;EDCE,wBAAA;ECCF,qCAAA;EDCE,6BAAA;ECCF,6BAAA;EDCE,qBAAA;ECCF,8BAAA;EDCE,sBAAA;EACA,uBAAA;EACA,eAAA;EACA,uBAAA;ACCF;;ADEA;EACE,uCAAA;ACCF;;ADEA;ECCA,qCAAA;AACA;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;ECCF,oBAAA;EDCE,8BAAA;ECCF,4CAAA;EDCE,oCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,2CAAA;EACA,mCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;ECCF,6BAAA;AACA;;AC3DA;EACE,oSAAA;EACA,2CAAA;AD8DF;;AC3DA;EACE,kDAAA;AD8DF;;AC3DA;ED8DA,iDAAA;AACA;;AExEA;EF2EA,oSAAA;EEzEE,0CAAA;AF2EF;;AExEA;EF2EA,iDAAA;AACA;;AExEA;EACE,gDAAA;AF2EF;;AGjFA;EACE,kBAAA;AHoFF;;AGjFA;EACE,qBAAA,EAAA,qBAAA;EACA,iCAAA;EACA,iBAAA;EACA,gCAAA;EACA,kBAAA,EAAA,4CAAA;EACA,qBAAA,EAAA,kEAAA;EHoFF,kDAAA;EGjFE,mBAAA;AHmFF;;AGhFA;kGAAA;;AAEA;EACE,wBAAA,EAAA,0DAAA;EACA,2BAAA,EAAA,oEAAA;EACA,cAAA;EACA,YAAA,EAAA,yDAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA,EAAA,oEAAA;EACA,kBAAA;AHmFF;;AGhFA;EACE,WAAA;EACA,iBAAA;EACA,qBAAA,EAAA,2CAAA;EACA,mBAAA;AHmFF;;AGhFA;EACE,kBAAA;EACA,QAAA;EACA,MAAA,EAAA,qFAAA;EACA,qBAAA,EAAA,2CAAA;EACA,mBAAA;AHmFF;;AGhFA;EACE,oBAAA,EAAA,wFAAA;EACA,eAAA,EAAA,sCAAA;EACA,6BAAA;EAAA,wBAAA;EACA,uBAAA,EAAA,2BAAA;EACA,gBAAA;EACA,gBAAA;EACA,eAAA;EACA,UAAA;EACA,qBAAA,EAAA,2CAAA;AHmFF;;AGhFA;EACE,mBAAA;EACA,mBAAA;EACA,4BAAA;EACA,aAAA;EACA,0BAAA;EACA,uBAAA;EACA,eAAA;EACA,iCAAA;EACA,kCAAA;EACA,qBAAA;AHmFF;;AGhFA;EACE,0BAAA;AHmFF;;AGhFA;EACE,6CAAA;EACA,mBAAA;AHmFF;;AGhFA;EACE,qDAAA;EACA,yBAAA;AHmFF;;AGhFA;EACE,qBAAA;AHmFF;;AGhFA;EACE,mBAAA;EACA,4BAAA;EACA,aAAA;EACA,0BAAA;EACA,uBAAA;EACA,WAAA;AHmFF","file":"pagination.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/angle-right.css';\n@use '../../icons/angle-left.css';\n\n.hds-pagination-container {\n  text-align: center;\n}\n\n.hds-pagination {\n  display: inline-block; /* Allows centering */\n  font-size: var(--fontsize-body-m);\n  font-weight: bold;\n  line-height: var(--lineheight-l);\n  position: relative; /* Enables position absolute for btn--next */\n  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n  --active-page-background-color: var(--color-black);\n  --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n.hds-pagination:before {\n  content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n  display: block;\n  float: right; /* Floated pseudo-element wraps the inline ul around it */\n  line-height: 56px;\n  padding-left: 100px;\n  speak: never; /* Removes this pseudo-element from screen readers where supported */\n  visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n  float: left;\n  margin-right: 8px;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n  position: absolute;\n  right: 0;\n  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination__pages {\n  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n  flex-wrap: wrap; /* Allow wrapping of the li-elements */\n  gap: var(--spacing-2-xs);\n  justify-content: center; /* Center the li-elements */\n  list-style: none;\n  margin-bottom: 0;\n  margin-top: 8px;\n  padding: 0;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n  align-items: center;\n  border-radius: 21px;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  min-width: 32px;\n  padding-left: var(--spacing-3-xs);\n  padding-right: var(--spacing-3-xs);\n  text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n  text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n  outline: solid var(--color-focus-outline) 3px;\n  outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n  background-color: var(--active-page-background-color);\n  color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n  text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n  align-items: center;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  width: 40px;\n}\n",".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n",".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/angle-right.css';\n@use '../../icons/angle-left.css';\n\n.hds-pagination-container {\n  text-align: center;\n}\n\n.hds-pagination {\n  display: inline-block; /* Allows centering */\n  font-size: var(--fontsize-body-m);\n  font-weight: bold;\n  line-height: var(--lineheight-l);\n  position: relative; /* Enables position absolute for btn--next */\n  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n  --active-page-background-color: var(--color-black);\n  --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n.hds-pagination:before {\n  content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n  display: block;\n  float: right; /* Floated pseudo-element wraps the inline ul around it */\n  line-height: 56px;\n  padding-left: 100px;\n  speak: never; /* Removes this pseudo-element from screen readers where supported */\n  visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n  float: left;\n  margin-right: 8px;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n  position: absolute;\n  right: 0;\n  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination__pages {\n  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n  flex-wrap: wrap; /* Allow wrapping of the li-elements */\n  gap: var(--spacing-2-xs);\n  justify-content: center; /* Center the li-elements */\n  list-style: none;\n  margin-bottom: 0;\n  margin-top: 8px;\n  padding: 0;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n  align-items: center;\n  border-radius: 21px;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  min-width: 32px;\n  padding-left: var(--spacing-3-xs);\n  padding-right: var(--spacing-3-xs);\n  text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n  text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n  outline: solid var(--color-focus-outline) 3px;\n  outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n  background-color: var(--active-page-background-color);\n  color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n  text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n  align-items: center;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  width: 40px;\n}\n"]}

package/lib/components/pagination/pagination.min.css

@@ -0,0 +1 @@
+.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--angle-right{--mask-image-angle-right:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12l-5-5L10 5.5l6.5 6.5-6.5 6.5L8.5 17l5-5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-right)}.hds-icon-start--angle-right{--mask-image-before:var(--mask-image-angle-right)}.hds-icon-end--angle-right{--mask-image-after:var(--mask-image-angle-right)}.hds-icon--angle-left{--mask-image-angle-left:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12l5 5-1.5 1.5L7.5 12 14 5.5 15.5 7l-5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-left)}.hds-icon-start--angle-left{--mask-image-before:var(--mask-image-angle-left)}.hds-icon-end--angle-left{--mask-image-after:var(--mask-image-angle-left)}.hds-pagination-container{text-align:center}.hds-pagination{display:inline-block;font-size:var(--fontsize-body-m);font-weight:700;line-height:var(--lineheight-l);position:relative;transform:scaleY(-1);--active-page-background-color:var(--color-black);--link-height:40px}.hds-pagination:before{content:attr(data-next);content:attr(data-next)/"";display:block;float:right;line-height:56px;padding-left:100px;speak:never;visibility:hidden}.hds-pagination .hds-pagination__button-prev{float:left;margin-right:8px;transform:scaleY(-1);white-space:nowrap}.hds-pagination .hds-pagination__button-next{position:absolute;right:0;top:0;transform:scaleY(-1);white-space:nowrap}.hds-pagination__pages{display:inline-flex;flex-wrap:wrap;grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;list-style:none;margin-bottom:0;margin-top:8px;padding:0;transform:scaleY(-1)}.hds-pagination__item-link{align-items:center;border-radius:21px;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;min-width:32px;padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs);text-decoration:none}.hds-pagination__item-link:hover{text-decoration:underline}.hds-pagination__item-link:active,.hds-pagination__item-link:focus{outline:solid var(--color-focus-outline) 3px;outline-offset:1px}.hds-pagination__item-link.hds-pagination__item-link--active{background-color:var(--active-page-background-color);color:var(--color-white)}.hds-pagination__item-link.hds-pagination__item-link--active:hover{text-decoration:none}.hds-pagination__item-ellipsis{align-items:center;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;width:40px}

package/lib/components/pagination/pagination.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/pagination/pagination.css","../../../src/icons/angle-right.css","../../../src/icons/angle-left.css","../../../src/components/pagination/pagination.css%23sass"],"names":[],"mappings":"AAAA,UCCA,6BAAA,CACA,oBAAA,CDCE,uBAAA,CCCF,oCAAA,CDCE,4BAAA,CCCF,4BAAA,CDCE,oBAAA,CCCF,6BAAA,CDCE,qBAAA,CACA,sBAAA,CACA,cAAA,CACA,sBCCF,CDEA,mBACE,sCCCF,CDEA,kBCCA,oCACA,CDEA,kBACE,mCCCF,CDEA,kBACE,mCCCF,CDEA,mBACE,mCCCF,CDEA,iCCKA,2CAAA,CDCE,mCCKF,CDEA,+DAZE,6BAAA,CACA,UAAA,CCCF,mBAAA,CDCE,4BAAA,CAGA,4BAAA,CAAA,oBAAA,CACA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CACA,2BCcF,CDXA,8BAKE,0CAAA,CACA,kCCKF,CC3DA,uBACE,uQAAA,CACA,0CD8DF,CC3DA,6BACE,iDD8DF,CC3DA,2BD8DA,gDACA,CExEA,sBF2EA,qQAAA,CEzEE,yCF2EF,CExEA,4BF2EA,gDACA,CExEA,0BACE,+CF2EF,CGjFA,0BACE,iBHoFF,CGjFA,gBACE,oBAAA,CACA,gCAAA,CACA,eAAA,CACA,+BAAA,CACA,iBAAA,CACA,oBAAA,CHoFF,iDAAA,CGjFE,kBHmFF,CG9EA,uBACE,uBAAA,CACA,0BAAA,CACA,aAAA,CACA,WAAA,CACA,gBAAA,CACA,kBAAA,CACA,WAAA,CACA,iBHmFF,CGhFA,6CACE,UAAA,CACA,gBAAA,CACA,oBAAA,CACA,kBHmFF,CGhFA,6CACE,iBAAA,CACA,OAAA,CACA,KAAA,CACA,oBAAA,CACA,kBHmFF,CGhFA,uBACE,mBAAA,CACA,cAAA,CACA,4BAAA,CAAA,uBAAA,CACA,sBAAA,CACA,eAAA,CACA,eAAA,CACA,cAAA,CACA,SAAA,CACA,oBHmFF,CGhFA,2BACE,kBAAA,CACA,kBAAA,CACA,2BAAA,CACA,YAAA,CACA,yBAAA,CACA,sBAAA,CACA,cAAA,CACA,gCAAA,CACA,iCAAA,CACA,oBHmFF,CGhFA,iCACE,yBHmFF,CGhFA,mEACE,4CAAA,CACA,kBHmFF,CGhFA,6DACE,oDAAA,CACA,wBHmFF,CGhFA,mEACE,oBHmFF,CGhFA,+BACE,kBAAA,CACA,2BAAA,CACA,YAAA,CACA,yBAAA,CACA,sBAAA,CACA,UHmFF","file":"pagination.min.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/angle-right.css';\n@use '../../icons/angle-left.css';\n\n.hds-pagination-container {\n  text-align: center;\n}\n\n.hds-pagination {\n  display: inline-block; /* Allows centering */\n  font-size: var(--fontsize-body-m);\n  font-weight: bold;\n  line-height: var(--lineheight-l);\n  position: relative; /* Enables position absolute for btn--next */\n  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n  --active-page-background-color: var(--color-black);\n  --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n.hds-pagination:before {\n  content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n  display: block;\n  float: right; /* Floated pseudo-element wraps the inline ul around it */\n  line-height: 56px;\n  padding-left: 100px;\n  speak: never; /* Removes this pseudo-element from screen readers where supported */\n  visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n  float: left;\n  margin-right: 8px;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n  position: absolute;\n  right: 0;\n  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination__pages {\n  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n  flex-wrap: wrap; /* Allow wrapping of the li-elements */\n  gap: var(--spacing-2-xs);\n  justify-content: center; /* Center the li-elements */\n  list-style: none;\n  margin-bottom: 0;\n  margin-top: 8px;\n  padding: 0;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n  align-items: center;\n  border-radius: 21px;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  min-width: 32px;\n  padding-left: var(--spacing-3-xs);\n  padding-right: var(--spacing-3-xs);\n  text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n  text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n  outline: solid var(--color-focus-outline) 3px;\n  outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n  background-color: var(--active-page-background-color);\n  color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n  text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n  align-items: center;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  width: 40px;\n}\n",".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n",".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/angle-right.css';\n@use '../../icons/angle-left.css';\n\n.hds-pagination-container {\n  text-align: center;\n}\n\n.hds-pagination {\n  display: inline-block; /* Allows centering */\n  font-size: var(--fontsize-body-m);\n  font-weight: bold;\n  line-height: var(--lineheight-l);\n  position: relative; /* Enables position absolute for btn--next */\n  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n  --active-page-background-color: var(--color-black);\n  --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n.hds-pagination:before {\n  content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n  display: block;\n  float: right; /* Floated pseudo-element wraps the inline ul around it */\n  line-height: 56px;\n  padding-left: 100px;\n  speak: never; /* Removes this pseudo-element from screen readers where supported */\n  visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n  float: left;\n  margin-right: 8px;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n  position: absolute;\n  right: 0;\n  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n  transform: scaleY(-1); /* Flip the element back from upside down */\n  white-space: nowrap;\n}\n\n.hds-pagination__pages {\n  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n  flex-wrap: wrap; /* Allow wrapping of the li-elements */\n  gap: var(--spacing-2-xs);\n  justify-content: center; /* Center the li-elements */\n  list-style: none;\n  margin-bottom: 0;\n  margin-top: 8px;\n  padding: 0;\n  transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n  align-items: center;\n  border-radius: 21px;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  min-width: 32px;\n  padding-left: var(--spacing-3-xs);\n  padding-right: var(--spacing-3-xs);\n  text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n  text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n  outline: solid var(--color-focus-outline) 3px;\n  outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n  background-color: var(--active-page-background-color);\n  color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n  text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n  align-items: center;\n  color: var(--color-black-90);\n  display: flex;\n  height: var(--link-height);\n  justify-content: center;\n  width: 40px;\n}\n"]}