@inera/ids-design 5.2.2 → 5.4.0

package/src/themes/inera/inera.scss

@@ -0,0 +1,656 @@
+@use "../../global/partials";
+@use "../reset.scss";
+@use "../../global/global.scss";
+@use "./inera-tokens";
+@use "./inera-typography";
+
+:root,
+:host {
+  /**********************
+    * General
+  **********************/
+  --IDS-BORDER-RADIUS: 0.188rem;
+  --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
+
+  /* Focus */
+  --IDS-FOCUS__OUTLINE: 0.125rem solid var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-FOCUS__OUTLINE--LIGHT: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-FOCUS__OUTLINE-OFFSET: 0.125rem;
+
+  /* Scroll */
+  --IDS-SCROLL__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-SCROLL__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-SCROLL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+
+  /**********************
+  * FORM
+  **********************/
+
+  /* Form common */
+  --IDS-FORM-PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-FORM--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--INVALID__BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
+  --IDS-FORM--INVALID__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-FORM--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-FORM-LABEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-FORM-LABEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-FORM-LABEL__FONT-SIZE: 1rem;
+  --IDS-FORM-LABEL__FONT-WEIGHT: 400;
+  --IDS-FORM-LABEL__LETTER-SPACING: 0;
+  --IDS-FORM-LABEL__HEIGHT: 1.25rem;
+  --IDS-FORM-LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM-INERA__BORDER-RADIUS: 0.188rem;
+
+  /* Error message */
+  --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
+  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
+  --IDS-ERROR-MESSAGE__PADDING: 0.813rem 1.25rem;
+  --IDS-ERROR-MESSAGE__ICON-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="100%" height="100%" style="" viewBox="0 0 40 40" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5134 12.7567C22.5134 12.7889 22.5129 12.821 22.5118 12.8529C22.5129 12.8828 22.5134 12.913 22.5134 12.9436C22.5134 13.1581 22.4809 13.4575 22.4158 13.8419L20.3119 24.2492C20.2585 24.5129 20.0268 24.7025 19.7577 24.7025C19.4877 24.7025 19.2554 24.5117 19.2031 24.2468L17.1463 13.8419C17.0857 13.5476 17.0439 13.2999 17.021 13.0987C17.007 12.976 17 12.8707 17 12.7827L17 12.7713L17 12.7567C17 11.2342 18.2342 10 19.7567 10C21.2792 10 22.5134 11.2342 22.5134 12.7567ZM21.0564 29.572C20.6977 29.9324 20.2644 30.1126 19.7567 30.1126C19.2489 30.1126 18.8157 29.9324 18.457 29.572C18.0982 29.2117 17.9189 28.7765 17.9189 28.2664C17.9189 27.7675 18.0982 27.3378 18.457 26.9775C18.8157 26.6171 19.2489 26.4369 19.7567 26.4369C20.2644 26.4369 20.6977 26.6171 21.0564 26.9775C21.4151 27.3378 21.5945 27.7675 21.5945 28.2664C21.5945 28.7765 21.4151 29.2117 21.0564 29.572Z" fill="%23DB0F00"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.2886 18.5C39.8245 19.4282 39.8245 20.5718 39.2886 21.5L30.9433 35.9545C30.4074 36.8827 29.417 37.4545 28.3452 37.4545H11.6546C10.5828 37.4545 9.59245 36.8827 9.05655 35.9545L0.711251 21.5C0.175351 20.5718 0.175351 19.4282 0.711251 18.5L9.05655 4.04553C9.59245 3.11733 10.5828 2.54553 11.6546 2.54553L28.3452 2.54553C29.417 2.54553 30.4074 3.11733 30.9433 4.04553L39.2886 18.5ZM37.5565 20.5C37.7352 20.1906 37.7352 19.8094 37.5565 19.5L29.2112 5.04553C29.0326 4.73613 28.7025 4.54553 28.3452 4.54553L11.6546 4.54553C11.2974 4.54553 10.9672 4.73613 10.7886 5.04553L2.4433 19.5C2.26467 19.8094 2.26467 20.1906 2.4433 20.5L10.7886 34.9545C10.9672 35.2639 11.2974 35.4545 11.6546 35.4545H28.3452C28.7025 35.4545 29.0326 35.2639 29.2112 34.9545L37.5565 20.5Z" fill="%23DB0F00"></path></svg>');
+
+  /* Checkbox */
+  --IDS-CHECKBOX__BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-CHECKBOX__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-CHECKBOX__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%2340775E"></path></svg>');
+  --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  --IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23727373' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  --IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23DB0F00"></path></svg>');
+  --IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23727373"></path></svg>');
+
+  /* Input */
+  --IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-INPUT__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-INPUT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-INPUT__BOX-SHADOW: none;
+  --IDS-INPUT__HEIGHT: 3rem;
+  --IDS-INPUT__PADDING: 0 1.25rem;
+  --IDS-INPUT__ICON-RIGHT: 1.25rem;
+  --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
+  --IDS-INPUT--DISABLED__ICON-FILL: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-INPUT--INVALID__ICON-FILL: var(--IDS-COLOR-ACCENT-40);
+
+  --IDS-INPUT--SEARCH__BORDER-RADIUS: 0.188rem;
+  --IDS-INPUT--SEARCH__HEIGHT-MOBILE: 3rem;
+  --IDS-INPUT--SEARCH__HEIGHT-DESKTOP: 3.75rem;
+  --IDS-INPUT--SEARCH__FONT-SIZE-MOBILE: 1rem;
+  --IDS-INPUT--SEARCH__FONT-SIZE-DESKTOP: 1.125rem;
+  --IDS-INPUT--SEARCH__PADDING-LEFT: 3.625rem;
+
+  /* Radio */
+  --IDS-RADIO__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-RADIO__BORDER: var(--IDS-INPUT__BORDER);
+  --IDS-RADIO--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+
+  /* Select */
+  --IDS-SELECT__LINE-HEIGHT: 2.875rem;
+  --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%2340775E"></path></g></svg>');
+  --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(48,90,71)"></path></g></svg>');
+  --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23DB0F00"></path></g></svg>');
+  --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23727373"></path></g></svg>');
+
+  /* Select multiple */
+  --IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS: 0.188rem;
+
+  /* Textarea*/
+  --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TEXTAREA__RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='2.5rem' height='2.5rem' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z' fill='%23396291' id='path2' style='fill:%2340775e;fill-opacity:1' /%3E%3Cpath d='m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z' fill='%23396291' id='path1' style='fill:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
+  --IDS-TEXTAREA__PADDING: 0.75rem 0.625rem;
+
+  /* Toggle */
+  --IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TOGGLE__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.625rem" height="0.625rem" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="rgb(53,53,53)"></path></svg>');
+  --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(48,90,71)"></path></svg>');
+  --IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  --IDS-TOGGLE--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.625rem" height="0.625rem" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="rgb(128,130,133)"></path></svg>');
+  --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(128,130,133)"></path></svg>');
+
+  /* Range */
+  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  /**********************
+  * COMPONENTS
+  **********************/
+
+  /* Alert */
+  --IDS-ALERT__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-ALERT__HEADLINE-FONT-WEIGHT: 600;
+
+  --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ALERT--INFO__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--INFO__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
+
+  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ALERT--ATTENTION__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--ATTENTION__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
+
+  --IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
+  --IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-ALERT--SUCCESS__ICON-COLOR-1: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-ALERT--SUCCESS__ICON-COLOR-2: var(--IDS-COLOR-SUCCESS-40);
+
+  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-ALERT--ERROR__ICON-COLOR-1: var(--IDS-COLOR-ERROR-40);
+  --IDS-ALERT--ERROR__ICON-COLOR-2: var(--IDS-COLOR-ERROR-40);
+
+  /* Alert global */
+  --IDS-ALERT-GLOBAL__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-ALERT-GLOBAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-ALERT-GLOBAL__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL-CHEVRON__COLOR: var(--IDS-COLOR-ON-ATTENTION-95);
+  --IDS-ALERT-GLOBAL-HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* Badge */
+  --IDS-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-BADGE--PRIMARY__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-BADGE--PRIMARY__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+  --IDS-BADGE--PRIMARY__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  --IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-BADGE--NEUTRAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-BADGE--NEUTRAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  --IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-BADGE--INFO__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BADGE--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  --IDS-BADGE--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-BADGE--ATTENTION__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BADGE--ATTENTION__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  --IDS-BADGE--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
+  --IDS-BADGE--SUCCESS__BORDER: 0.063rem solid var(--IDS-COLOR-SUCCESS-40);
+  --IDS-BADGE--SUCCESS__COLOR: var(--IDS-COLOR-SUCCESS-40);
+
+  --IDS-BADGE--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-BADGE--ERROR__BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
+  --IDS-BADGE--ERROR__COLOR: var(--IDS-COLOR-ERROR-40);
+
+  --IDS-BADGE--SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BADGE--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BADGE--SECONDARY__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  /* Breadcrumbs */
+  --IDS-BREADCRUMBS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-BREADCRUMBS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BREADCRUMBS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  /* Button */
+  --IDS-BUTTON--S__FONT-SIZE: 1rem;
+  --IDS-BUTTON--S__LINE-HEIGHT: 1.25rem;
+  --IDS-BUTTON--S__PADDING: 0.188rem 1.438rem;
+  --IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
+  --IDS-BUTTON--M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--M__PADDING: 0.438rem 1.938rem;
+  --IDS-BUTTON--L__FONT-SIZE: 1.25rem;
+  --IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
+  --IDS-BUTTON--L__PADDING: 0.688rem 2.438rem;
+
+  --IDS-BUTTON__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-BUTTON__FONT-WEIGHT: 400;
+  --IDS-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-BUTTON__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+
+  --IDS-BUTTON--SECONDARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--IDS-COLOR-ON-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+
+  --IDS-BUTTON--TERTIARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+
+  --IDS-BUTTON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BUTTON--DISABLED__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+
+  --IDS-BUTTON--SEARCH__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-BUTTON--SEARCH-S__HEIGHT: 3rem;
+  --IDS-BUTTON--SEARCH-S__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SEARCH-S__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SEARCH-M__HEIGHT: 3rem;
+  --IDS-BUTTON--SEARCH-M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SEARCH-M__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SEARCH-L__HEIGHT: 3.75rem;
+  --IDS-BUTTON--SEARCH-L__FONT-SIZE: 1.5rem;
+  --IDS-BUTTON--SEARCH-L__PADDING: 1rem 2rem;
+
+  --IDS-BUTTON--SUBMIT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-M__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-M__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-L__HEIGHT: 3.75rem;
+  --IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
+  --IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
+
+  --IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--FAB__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+
+  /* Card */
+  --IDS-CARD__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CARD__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-CARD__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-CARD__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-CARD--BORDER__BORDER: none;
+  --IDS-CARD--HOVER__BOX-SHADOW: 0 0 0.625rem 0 rgba(0, 0, 0, 0.3);
+  --IDS-CARD--FILL__BACKGROUND: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-CARD--FILL__BORDER: 0.063rem solid var(--IDS-CARD--FILL__BACKGROUND);
+  --IDS-CARD--FILL__BORDER-INTERACTIVE: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+  --IDS-CARD--FILL-2__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CARD--FILL-2__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+
+  /* Carousel */
+  --IDS-CAROUSEL__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-CAROUSEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-CAROUSEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-CAROUSEL-HEADLINE__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-CAROUSEL-SLIDES__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CAROUSEL-DESCRIPTION__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CAROUSEL-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-CAROUSEL-ICON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Data Table */
+  --IDS-DATA-TABLE__BORDER-RADIUS: 0.313rem 0.313rem 0.313rem 0.313rem;
+  --IDS-DATA-TABLE__HEAD-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DATA-TABLE__CELL-BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-DATA-TABLE__ROW--SELECTED__COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DATA-TABLE__CELL-BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  /* Date label */
+  --IDS-DATE-LABEL__DAY-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-DATE-LABEL__DAY-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-DATE-LABEL__MONTH-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-DATE-LABEL__MONTH-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-DATE-LABEL__YEAR-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-DATE-LABEL__YEAR-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* Description list */
+  --IDS-DESCRIPTION-LIST__DISPLAY: flex;
+  --IDS-DESCRIPTION-LIST__BORDER: 0;
+  --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
+  --IDS-DESCRIPTION-LIST__PADDING: 0;
+  --IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR: transparent;
+  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
+  --IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM: 0.75rem;
+
+  --IDS-DESCRIPTION-LIST--COLUMN__DISPLAY: grid;
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS: 0.313rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__PADDING: 0.5rem 1rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM: 0;
+
+  /* Dialog */
+  --IDS-DIALOG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-DIALOG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DIALOG__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-DIALOG__HEADLINE-FONT-WEIGHT: 600;
+  --IDS-DIALOG__HEADLINE-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-DIALOG__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+
+  /* Dropdown */
+  --IDS-DROPDOWN__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DROPDOWN__LINK-BORDER-RADIUS: 0.188rem;
+
+  /* Expandable */
+  --IDS-EXPANDABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-EXPANDABLE__HEADLINE-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-EXPANDABLE__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-EXPANDABLE__HEADLINE-FONT-WEIGHT: 600;
+  --IDS-EXPANDABLE__HEADLINE-FONT-SIZE: 1.75rem;
+  --IDS-EXPANDABLE__HEADLINE-2-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-EXPANDABLE__ICON-2-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-EXPANDABLE--MOBILE__HEADLINE-FONT-SIZE: 1.75rem;
+  --IDS-EXPANDABLE--CHILD__HEADLINE-FONT-SIZE: 1.25rem;
+
+  /* Footer old */
+  --footer_background-color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-inner_padding-top: 4.375rem;
+  --footer-inner_padding-bottom: 5.313rem;
+  --footer-inner-mobile_padding-bottom: 3.125rem;
+  --footer-headline_color: var(--IDS-COLOR-ON-PRIMARY-40);
+  --footer-headline_font-size: 1.625rem;
+  --footer-headline_line-height: 2rem;
+  --footer-headline_letter-spacing: -0.031rem;
+  --footer-headline_font-weight: bold;
+  --footer-headline-sub_color: var(--IDS-COLOR-ON-PRIMARY-40);
+  --footer-content_color: var(--IDS-COLOR-ON-PRIMARY-40);
+  --footer-link_color: var(--IDS-COLOR-ON-PRIMARY-40);
+  --footer-sub_padding-top: 0.625rem;
+  --footer-sub_padding-bottom: 0.625rem;
+  --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-30);
+  --footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-30);
+  --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
+  --footer-sub-text_color: var(--IDS-COLOR-ON-PRIMARY-40);
+
+  /* Header */
+  --IDS-HEADER-INERA__USER-ICON-COLOR: #e3abc1;
+  --IDS-HEADER-INERA__USER-ICON-COLOR-2: var(--IDS-COLOR-PRIMARY-40);
+  /* old */
+  --header-item-icon-color: #e3abc1;
+  --header-item-icon-color2: var(--IDS-COLOR-PRIMARY-40);
+  --header-main_background: var(--color-dust-light);
+  --header-inner_background: var(--IDS-COLOR-BACKGROUND);
+  --header-nav_background-color: transparent;
+  --header-nav-menu_color: var(--IDS-COLOR-PRIMARY-40);
+  --header-nav-mobile-menu-items_box-shadow: 0 0.125rem 0.313rem #c5c5c5;
+  --header-nav-item_color: var(--IDS-COLOR-NEUTRAL-20);
+  --header-nav-item-active_color: var(--IDS-COLOR-NEUTRAL-20);
+  --header-nav-item_font-size: 1.125rem;
+  --header-nav-item_font-weight: 600;
+  --header-nav-item_font-family: var(--IDS-FONT-FAMILY-HEADING);
+  --header-nav-item_padding: 0.5rem 0.625rem 0.5rem 0.625rem;
+  --header-nav-item-expanded_color: var(--IDS-COLOR-NEUTRAL-20);
+  --header-nav-item-after_background: var(--IDS-COLOR-PRIMARY-40);
+  --header-nav-item-after_content: "";
+  --header-nav-item-content_background: var(--IDS-COLOR-SECONDARY-95);
+  --header-nav-item-link_border-bottom: 0.063rem solid #ddd7d3;
+  --header-nav_border-top: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+
+  /* Icon */
+  --IDS-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON__COLOR-2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON--ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ICON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-90);
+
+  --IDS-ICON__COLOR-PRESET-1: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON__COLOR-PRESET-1-2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON__COLOR-PRESET-2: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-ICON__COLOR-PRESET-2-2: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-ICON__COLOR-PRESET-3: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ICON__COLOR-PRESET-3-2: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ICON__COLOR-PRESET-4: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-ICON__COLOR-PRESET-4-2: var(--IDS-COLOR-NEUTRAL-100);
+
+  /* Link */
+  --IDS-LINK__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  --IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  --IDS-LINK--COLORPRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-LINK--COLORPRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+
+  --IDS-LINK--COLORPRESET-3__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-LINK--COLORPRESET-3__HOVER-COLOR: black;
+  --IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR: black;
+  --IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* List */
+  --IDS-LIST__HEADING-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LIST__BORDER: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-LIST__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-LIST__ITEM-INFO-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* List pagination */
+  --IDS-LIST-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+
+  /* Mobile menu */
+  /* Level 1 */
+  --IDS-MOBILE-MENU-ITEM__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-ITEM__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-ITEM__FONT-WEIGHT: 600;
+  --IDS-MOBILE-MENU-ITEM__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--EXPANDED__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+  /* Secondary */
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+
+  /* Level 2 */
+  --IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT: normal;
+  --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-40);
+  --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--L2-HAS-CHILDREN__FONT-WEIGHT: normal;
+  --IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* VARIATION 2 - Level 1 */
+  --IDS-MOBILE-MENU-2-ITEM__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT: 600;
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  /* VARIATION 2  - Level 2 */
+  --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT: normal;
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  --IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L3__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  /* --- end of mobile menu */
+
+  /* Navigation content */
+  --IDS-NAVIGATION-CONTENT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
+  --IDS-NAVIGATION-CONTENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 600;
+  --IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
+  --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 1.375rem;
+  --IDS-NAVIGATION-CONTENT__PADDING-BOTTOM: 0.313rem;
+  --IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+
+  /* Navigation local  */
+  --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+
+  /* Notification */
+  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  /* Popover */
+  --IDS-POPOVER-CONTENT__BORDER: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-POPOVER-CONTENT__BORDER-RADIUS: 0.188rem;
+  --IDS-POPOVER__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Progressbar */
+  --IDS-PROGRESSBAR__BORDER-COLOR: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-PROGRESSBAR__PROGRESS-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-PROGRESSBAR__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* Side menu */
+  --IDS-SIDE-MENU__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU__LINK-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+
+  /* Side panel */
+  --IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--IDS-COLOR-PRIMARY-40);
+
+  /* Stepper */
+  --IDS-STEP__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-STEP__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-STEP__HEADLINE-LETTER-SPACING: 0;
+  --IDS-STEP__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-STEP--DISABLED__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP--DISABLED__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-STEP__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__INDICATOR-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__INDICATOR-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-STEP__CHEVRON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP--VALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
+  --IDS-STEP--VALID__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-SUCCESS-40);
+  --IDS-STEP--INVALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-STEP--INVALID__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
+
+  /* Spinner */
+  --IDS-SPINNER__COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Table */
+  --IDS-TABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-RADIUS: 0.313rem;
+  --IDS-TABLE__BORDER-TOP: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-LR: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-TABLE__CELL-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+
+  /* Tab */
+  --IDS-TABS__BORDER-BOTTOM: 0.25rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
+  --IDS-TAB__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAB__BORDER: 0.063rem solid transparent;
+  --IDS-TAB--SELECTED-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TAB__BORDER-RADIUS: 0.188rem 0.188rem 0 0;
+  --IDS-TAB--SELECTED__BOX-SHADOW: 0 0 0.25rem rgba(0, 0, 0, 0.3);
+  --IDS-TAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED__BEFORE-CONTENT: none;
+  --IDS-TAB--SELECTED__AFTER-HEIGHT: 0.25rem;
+  --IDS-TAB--SELECTED__AFTER-BOTTOM: -0.25rem;
+  --IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  /* Tag */
+  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TAG__BORDER-RADIUS: 0.313rem;
+  --IDS-TAG__PADDING: 0.438rem 0.938rem;
+  --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
+  --IDS-TAG--INTERACTIVE-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAG__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Tooltip */
+  --IDS-TOOLTIP__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TOOLTIP__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+}
+/**********************
+BASE
+**********************/
+
+/* Input Search cancel icon */
+ids-input input[type="search"]::-webkit-search-cancel-button,
+ids-input input[type="search"]::-webkit-search-results-button,
+ids-input input[type="search"]::-webkit-search-results-decoration {
+  appearance: none;
+  -webkit-appearance: none;
+  display: none;
+}
+
+.ids-divider {
+  width: 100%;
+  height: 0.063rem;
+  background-color: var(--IDS-COLOR-NEUTRAL-40);
+  border: none;
+}
+
+.ids-scrollbar {
+  @include partials.ids-scrollbar();
+}
+
+.ids-label {
+  @include partials.ids-label();
+}
+
+.ids-label-wrapper {
+  @include partials.ids-label-wrapper();
+}
+
+.ids-show-inera {
+  display: block;
+}
+.ids-show-inera-force {
+  display: block !important;
+}
+.ids-show-inera-all {
+  display: block !important;
+}
+.ids-hide-inera {
+  display: none;
+}