@inera/ids-design 8.1.0 → 8.2.0

package/components/form/datepicker/datepicker.css

@@ -0,0 +1,570 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids--light, .ids--dark {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
+  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
+}
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
+  --IDS-PAGE-LIST__LETTER-SPACING: 0;
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
+  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
+}
+.ids--light.ids--dark, .ids--dark.ids--dark {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
+}
+.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
+.ids-datepicker .ids-datepicker__input-wrapper {
+  position: relative;
+}
+.ids-datepicker .ids-datepicker__input {
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  padding: var(--IDS-INPUT__PADDING);
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border: var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);
+  border-radius: var(--IDS-BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-FORM__COLOR);
+  display: block;
+}
+.ids-datepicker .ids-datepicker__input::placeholder {
+  color: var(--IDS-FORM__COLOR);
+}
+.ids-datepicker .ids-datepicker__input:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input:focus-visible, .ids-datepicker .ids-datepicker__input:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
+.ids-datepicker .ids-datepicker__input:disabled, .ids-datepicker .ids-datepicker__input[readonly], .ids-datepicker .ids-datepicker__input[readonly]:focus-visible, .ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
+}
+.ids-datepicker .ids-datepicker__input:disabled::placeholder, .ids-datepicker .ids-datepicker__input[readonly]::placeholder, .ids-datepicker .ids-datepicker__input[readonly]:focus-visible::placeholder, .ids-datepicker .ids-datepicker__input[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--invalid, .ids-datepicker .ids-datepicker__input[aria-invalid=true] {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
+  border: var(--IDS-FORM--INVALID__BORDER);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible, .ids-datepicker .ids-datepicker__input.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light:disabled, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly], .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light:disabled::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible::placeholder, .ids-datepicker .ids-datepicker__input.ids-input--light[readonly]:focus-visible:hover::placeholder {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+}
+.ids-datepicker .ids-datepicker__input.ids-input--light.ids-input--invalid, .ids-datepicker .ids-datepicker__input.ids-input--light[aria-invalid=true] {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-datepicker .ids-datepicker__input:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-datepicker .ids-datepicker__input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding-right: 4.25rem;
+}
+.ids-datepicker.ids-datepicker--invalid .ids-datepicker__input {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
+  border: var(--IDS-FORM--INVALID__BORDER);
+}
+.ids-datepicker .ids-datepicker__trigger {
+  cursor: pointer;
+  border: 0.125rem solid transparent;
+  background-color: var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);
+  color: var(--IDS-DATEPICKER__BUTTON-COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+}
+.ids-datepicker .ids-datepicker__trigger:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);
+}
+.ids-datepicker .ids-datepicker__trigger:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+}
+.ids-datepicker .ids-datepicker__trigger:active, .ids-datepicker .ids-datepicker__trigger:active:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);
+}
+.ids-datepicker .ids-datepicker__trigger:active:before, .ids-datepicker .ids-datepicker__trigger:active:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+}
+.ids-datepicker .ids-datepicker__trigger:disabled, .ids-datepicker .ids-datepicker__trigger[disabled], .ids-datepicker .ids-datepicker__trigger[aria-disabled=true] {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR) !important;
+  border-color: transparent;
+  pointer-events: none;
+  font-weight: normal;
+}
+.ids-datepicker .ids-datepicker__trigger:disabled:before, .ids-datepicker .ids-datepicker__trigger[disabled]:before, .ids-datepicker .ids-datepicker__trigger[aria-disabled=true]:before {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+}
+.ids-datepicker .ids-datepicker__trigger {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: var(--IDS-INPUT__HEIGHT);
+  width: 3.25rem;
+  background-color: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BACKGROUND-COLOR);
+  border-top-right-radius: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);
+  border-bottom-right-radius: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);
+}
+.ids-datepicker .ids-datepicker__trigger:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e944";
+  font-size: 1.25rem;
+  color: var(--IDS-DATEPICKER__TRIGGER-BUTTON-COLOR);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-datepicker .ids-datepicker__trigger:disabled {
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR);
+}
+.ids-datepicker .ids-datepicker__trigger:disabled:before {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR);
+}
+.ids-datepicker .ids-datepicker__dialog {
+  position: absolute;
+  right: 0;
+  padding: 1rem;
+  top: var(--IDS-INPUT__HEIGHT);
+  margin-top: 0.25rem;
+  border: 0.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);
+  border-radius: var(--IDS-DATEPICKER__TRIGGER-BUTTON-BORDER-RADIUS);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+  background-color: var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);
+  display: none;
+}
+.ids-datepicker .ids-datepicker__dialog.ids-datepicker__dialog--show {
+  display: block;
+}
+.ids-datepicker .ids-datepicker__dialog-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 0.0625rem solid var(--IDS-DATEPICKER-CALENDAR__BORDER-COLOR);
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header {
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);
+  font-weight: var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);
+}
+.ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus, .ids-datepicker .ids-datepicker__dialog-bar .ids-datepicker__dialog-header:focus-visible {
+  outline: none;
+}
+.ids-datepicker .ids-datepicker__dialog-close-button {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 100%;
+  cursor: pointer;
+  position: absolute;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-color: transparent;
+  background-color: var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);
+  right: 0.5rem;
+  top: 0.5rem;
+}
+.ids-datepicker .ids-datepicker__dialog-close-button::before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e934";
+  font-size: 1rem;
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-datepicker .rdp-dropdowns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root {
+  position: relative;
+  cursor: pointer;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-dropdown_root:first-of-type {
+  margin-right: 0.5rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown {
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.0625rem;
+  border-color: transparent;
+  background-color: var(--IDS-DATEPICKER__SELECT-BACKGROUND-COLOR);
+  cursor: pointer;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:active {
+  border-color: transparent;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns select.rdp-dropdown:disabled {
+  pointer-events: none;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__month-select {
+  width: 7.25rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .ids-datepicker__year-select {
+  width: 4.5rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label {
+  cursor: pointer;
+  pointer-events: none;
+  text-transform: capitalize;
+  position: absolute;
+  left: 0.25rem;
+  top: 0.25rem;
+  right: 0.25rem;
+  background-color: var(--IDS-DATEPICKER-CALENDAR__BACKGROUND-COLOR);
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);
+  font-weight: var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label::before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e936";
+  font-size: 1rem;
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
+  right: 0.125rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns .rdp-caption_label svg {
+  display: none;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-dropdown_root {
+  cursor: default;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label {
+  pointer-events: none;
+  color: var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR) !important;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-dropdowns:has(select:disabled) .rdp-caption_label:before {
+  color: var(--IDS-DATEPICKER__SELECT-DISABLED-COLOR) !important;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next {
+  cursor: pointer;
+  border: 0.125rem solid transparent;
+  background-color: var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);
+  color: var(--IDS-DATEPICKER__BUTTON-COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:hover:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active, .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:before, .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:active:hover:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:active:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled, .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled], .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true],
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled],
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true] {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR) !important;
+  border-color: transparent;
+  pointer-events: none;
+  font-weight: normal;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev:disabled:before, .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[disabled]:before, .ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev[aria-disabled=true]:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next:disabled:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[disabled]:before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next[aria-disabled=true]:before {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 100%;
+  position: relative;
+  height: 2.25rem;
+  width: 2.25rem;
+  padding: 0;
+  border: 0.0625rem solid transparent;
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-prev::before,
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next::before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e937";
+  font-size: 1rem;
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-datepicker .rdp-dropdowns .ids-datepicker__nav-buttons .ids-datepicker__nav-next::before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e938";
+  font-size: 1rem;
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-CHEVRON-COLOR);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-datepicker .rdp-month_grid {
+  margin-top: 0.75rem;
+}
+.ids-datepicker .ids-datepicker__week-number-header,
+.ids-datepicker .rdp-week_number {
+  font-weight: normal;
+  font-size: 0.75rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR);
+  padding-right: 0.25rem;
+}
+.ids-datepicker .rdp-weekday {
+  font-weight: var(--IDS-DATEPICKER__MONTH-BUTTON-FONT-WEIGHT);
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-DATEPICKER__MONTH-BUTTON-COLOR);
+}
+.ids-datepicker .rdp-day .rdp-day_button {
+  cursor: pointer;
+  border: 0.125rem solid transparent;
+  background-color: var(--IDS-DATEPICKER__DATE-BUTTON-BACKGROUND-COLOR);
+  color: var(--IDS-DATEPICKER__BUTTON-COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+}
+.ids-datepicker .rdp-day .rdp-day_button:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-HOVER-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-HOVER-BORDER-COLOR);
+}
+.ids-datepicker .rdp-day .rdp-day_button:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-HOVER-COLOR) !important;
+}
+.ids-datepicker .rdp-day .rdp-day_button:active, .ids-datepicker .rdp-day .rdp-day_button:active:hover {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-ACTIVE-BORDER-COLOR);
+}
+.ids-datepicker .rdp-day .rdp-day_button:active:before, .ids-datepicker .rdp-day .rdp-day_button:active:hover:before {
+  color: var(--IDS-DATEPICKER__BUTTON-ACTIVE-COLOR) !important;
+}
+.ids-datepicker .rdp-day .rdp-day_button:disabled, .ids-datepicker .rdp-day .rdp-day_button[disabled], .ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true] {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+  background-color: var(--IDS-DATEPICKER__BUTTON-DISABLED-BACKGROUND-COLOR) !important;
+  border-color: transparent;
+  pointer-events: none;
+  font-weight: normal;
+}
+.ids-datepicker .rdp-day .rdp-day_button:disabled:before, .ids-datepicker .rdp-day .rdp-day_button[disabled]:before, .ids-datepicker .rdp-day .rdp-day_button[aria-disabled=true]:before {
+  color: var(--IDS-DATEPICKER__BUTTON-DISABLED-COLOR) !important;
+}
+.ids-datepicker .rdp-day .rdp-day_button {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 100%;
+  justify-self: center;
+}
+.ids-datepicker .rdp-day.rdp-today .rdp-day_button {
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-TODAY-BORDER-COLOR);
+}
+.ids-datepicker .rdp-day.rdp-today .rdp-day_button:hover {
+  border-color: var(--IDS-DATEPICKER__BUTTON-TODAY-HOVER-BORDER-COLOR);
+}
+.ids-datepicker .rdp-day[aria-focused=true], .ids-datepicker .rdp-day:focus-visible {
+  border-radius: 100%;
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+}
+.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button {
+  color: var(--IDS-DATEPICKER__BUTTON-SELECTED-COLOR);
+  background-color: var(--IDS-DATEPICKER__BUTTON-SELECTED-BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-DATEPICKER__BUTTON-SELECTED-BORDER-COLOR);
+}
+.ids-datepicker .rdp-day[aria-selected=true] .rdp-day_button:disabled {
+  border-color: var(--IDS-DATEPICKER__BUTTON-DISABLED-BORDER-COLOR) !important;
+}
+@media (max-width: 640px) {
+  .ids-datepicker .ids-datepicker__overlay {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
+  }
+  .ids-datepicker .ids-datepicker__dialog {
+    z-index: 210;
+    position: fixed;
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+    min-height: 21rem !important;
+  }
+  .ids-datepicker .rdp-month_grid {
+    table-layout: fixed;
+    width: 100%;
+  }
+}

package/components/form/error-message/error-message-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER-THICKNESS) solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:.5rem;margin-bottom:.25rem;margin-top:.75rem;padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex;width:fit-content}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:.75rem;left:2.563rem;position:absolute;transform:rotate(45deg);width:.75rem;z-index:9}.ids-error-message:after{background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);top:-.3rem}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:var(--IDS-ERROR-MESSAGE__BEFORE-TOP)}.ids-error-message .ids-error-message__text{font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;min-height:1.5rem;padding-left:1.75rem;position:relative}.ids-error-message .ids-error-message__text:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ERROR-MESSAGE__COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}";
+var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER-THICKNESS) solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:.5rem;margin-bottom:.25rem;margin-top:.75rem;padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex;width:fit-content}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:.75rem;left:2.563rem;position:absolute;transform:rotate(45deg);width:.75rem;z-index:9}.ids-error-message:after{background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);top:-.3rem}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:var(--IDS-ERROR-MESSAGE__BEFORE-TOP)}.ids-error-message .ids-error-message__text{font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;min-height:1.5rem;padding-left:1.75rem;position:relative}.ids-error-message .ids-error-message__text:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ERROR-MESSAGE__COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;line-height:1.5rem;pointer-events:none;position:absolute;top:0}";
 
 var errorMessageLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/error-message/error-message.css

@@ -66,6 +66,7 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\e913";
   font-size: 1.25rem;
+  line-height: 1.5rem;
   color: var(--IDS-ERROR-MESSAGE__COLOR);
   left: 0;
   top: 0;

package/components/form/group/group-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-form-group__fieldset{border:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}.ids-form-group__fieldset.ids-form-group__fieldset--compact{gap:0}.ids-form-group__fieldset legend{align-items:center;color:var(--ids-color-surface-text-on-default);color:var(--IDS-FORM-LABEL__COLOR);display:inline-flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);gap:.5rem;letter-spacing:0;line-height:var(--ids-line-height-body-text);margin-bottom:.625rem;padding:0}.ids-form-group__fieldset legend ::slotted(*){margin-bottom:-.25rem}";
+var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-form-group__fieldset{border:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}.ids-form-group__fieldset.ids-form-group__fieldset--compact{gap:0}.ids-form-group__fieldset legend{align-items:flex-start;color:var(--ids-color-surface-text-on-default);color:var(--IDS-FORM-LABEL__COLOR);display:inline-flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);gap:.5rem;letter-spacing:0;line-height:var(--ids-line-height-body-text);margin-bottom:.625rem;padding:0}.ids-form-group__fieldset legend ::slotted(*){margin-bottom:-.25rem}";
 
 var groupLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/group/group.css

@@ -72,7 +72,7 @@
   letter-spacing: 0;
   color: var(--IDS-FORM-LABEL__COLOR);
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.625rem;
 }

package/components/form/range/range-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-range .ids-label,.ids-range ::slotted(label){display:inline-block;margin-bottom:.75rem!important}.ids-range .ids-range-ticks{display:flex;justify-content:space-between;margin-left:.75rem;margin-right:.75rem;margin-top:1.75rem;max-width:100%}.ids-range .ids-range-ticks .ids-range-tick{color:var(--ids-color-surface-text-on-default);display:flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);justify-content:center;letter-spacing:0;line-height:var(--ids-line-height-body-text);position:relative;text-align:center;width:0}.ids-range .ids-range-ticks .ids-range-tick:before{background-color:var(--IDS-RANGE__TICK-LINE-COLOR);content:\"\";display:block;height:.625rem;margin:auto;position:absolute;top:-1rem;width:.063rem}.ids-range .ids-range-ticks .ids-range-tick .ids-range-tick__label{display:block;position:relative}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick{font-style:italic}.ids-range__input,input[type=range]{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));background-repeat:no-repeat;background-size:98% 100%;border:var(--IDS-RANGE__BORDER-THICKNESS) solid var(--IDS-RANGE__BORDER-COLOR);border-radius:1rem;box-sizing:border-box;cursor:pointer;display:block;height:.5rem;margin:0 0 .75rem;padding:0;touch-action:pan-x;width:100%}.ids-range__input::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb,input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb,input[type=range]::-ms-thumb{background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-ms-thumb:hover,input[type=range]::-ms-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb:active,input[type=range]::-ms-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input:disabled,input[type=range]:disabled{background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));border:.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);cursor:default}.ids-range__input:disabled::-moz-range-thumb,input[type=range]:disabled::-moz-range-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-webkit-slider-thumb,input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-ms-thumb,input[type=range]:disabled::-ms-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}";
+var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-range .ids-label,.ids-range ::slotted(label){display:inline-block;margin-bottom:.75rem!important}.ids-range .ids-range-ticks{display:flex;justify-content:space-between;margin-left:.75rem;margin-right:.75rem;margin-top:1.75rem;max-width:100%}.ids-range .ids-range-ticks .ids-range-tick{color:var(--ids-color-surface-text-on-default);display:flex;font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-weight:var(--ids-font-weight-body-text);justify-content:center;letter-spacing:0;line-height:var(--ids-line-height-body-text);position:relative;text-align:center;width:0}.ids-range .ids-range-ticks .ids-range-tick:before{background-color:var(--IDS-RANGE__TICK-LINE-COLOR);content:\"\";display:block;height:.625rem;margin:auto;position:absolute;top:-1rem;width:.063rem}.ids-range .ids-range-ticks .ids-range-tick .ids-range-tick__label{display:block;position:relative}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick{color:var(--IDS-FORM--DISABLED__COLOR);font-family:var(--ids-font-family-body-text);font-size:var(--ids-font-size-body-text);font-style:normal;font-style:italic;font-weight:var(--ids-font-weight-body-text);letter-spacing:0;line-height:var(--ids-line-height-body-text)}.ids-range .ids-range-ticks.ids-range-ticks--disabled .ids-range-tick:before{background-color:var(--IDS-FORM--DISABLED__COLOR)}.ids-range__input,input[type=range]{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));background-repeat:no-repeat;background-size:98% 100%;border:var(--IDS-RANGE__BORDER-THICKNESS) solid var(--IDS-RANGE__BORDER-COLOR);border-radius:1rem;box-sizing:border-box;cursor:pointer;display:block;height:.5rem;margin:0 0 .75rem;padding:0;touch-action:pan-x;width:100%}.ids-range__input::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb,input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb,input[type=range]::-ms-thumb{background-color:var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);border-radius:100%;cursor:pointer;height:1.5rem;outline:.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);position:relative;width:1.5rem;z-index:1}.ids-range__input::-ms-thumb:hover,input[type=range]::-ms-thumb:hover{background-color:var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR)}.ids-range__input::-ms-thumb:active,input[type=range]::-ms-thumb:active{background-color:var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR)}.ids-range__input:disabled,input[type=range]:disabled{background-color:transparent;background-image:linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR),var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));border:.0625rem solid var(--IDS-RANGE--DISABLED__BORDER-COLOR);cursor:default}.ids-range__input:disabled::-moz-range-thumb,input[type=range]:disabled::-moz-range-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-webkit-slider-thumb,input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}.ids-range__input:disabled::-ms-thumb,input[type=range]:disabled::-ms-thumb{background-color:var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);cursor:default}";
 
 var rangeLit = css`${unsafeCSS(css_248z)}`;