@inera/ids-design 5.3.0 → 5.4.0

package/src/themes/1177/1177.scss

@@ -0,0 +1,670 @@
+@use "../../layout/breakpoints.scss";
+@use "../../global/partials";
+@use "../reset.scss";
+@use "../../global/global.scss";
+@use "./1177-tokens" as elva77Tokens;
+@use "./1177-typography" as elva77;
+
+:root {
+  /**********************
+    * General
+  **********************/
+  --IDS-BORDER-RADIUS: 0.625rem;
+  --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-40);
+  --IDS-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --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-ACCENT-95);
+
+  /**********************
+  * FORM
+  **********************/
+
+  /* Form common */
+  --IDS-FORM-PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-FORM--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--INVALID__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+  --IDS-FORM--INVALID__BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-FORM--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --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);
+
+  /* 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="%236a0032"></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="%23c12143"></path></svg>');
+
+  /* Checkbox */
+  --IDS-CHECKBOX__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-CHECKBOX__BORDER-RADIUS: 0.25rem;
+  --IDS-CHECKBOX__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-CHECKBOX__CHECK-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="%23396291"></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='%23c12143' 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='%23808285' 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="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="%23c12143"></path></svg>');
+  --IDS-CHECKBOX--DISABLED__CHECK-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="%23808285"></path></svg>');
+
+  /* Input */
+  --IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-INPUT__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-INPUT__BORDER-RADIUS: 0.625rem;
+  --IDS-INPUT__BOX-SHADOW: inset 0 0.313rem 0.625rem rgba(99, 100, 102, 0.2);
+  --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-50);
+  --IDS-INPUT--INVALID__ICON-FILL: var(--IDS-COLOR-PRIMARY-40);
+
+  --IDS-INPUT--SEARCH__BORDER-RADIUS: 0.625rem;
+  --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-ACCENT-95);
+  --IDS-RADIO__BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
+  --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-50);
+  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+
+  /* 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="%23396291"></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(59,66,102)"></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="%23c12143"></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="%23808285"></path></g></svg>');
+
+  /* Select multiple */
+  --IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS: 0.625rem;
+
+  /* Textarea */
+  --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --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" /%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:%23396291;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-50);
+  --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(59,66,102)"></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-RANGE__SELECTION-BACKGROUND-COLOR);
+  --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+
+  /**********************
+  * COMPONENTS
+  **********************/
+
+  /* Alert */
+  --IDS-ALERT__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-ALERT__HEADLINE-FONT-WEIGHT: 700;
+
+  --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ALERT--INFO__ICON-COLOR-1: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ALERT--INFO__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
+
+  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-ALERT--ATTENTION__ICON-COLOR-1: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ALERT--ATTENTION__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
+
+  --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-30);
+  --IDS-ALERT--SUCCESS__ICON-COLOR-2: var(--IDS-COLOR-SUCCESS-40);
+
+  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-ALERT--ERROR__ICON-COLOR-1: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-ALERT--ERROR__ICON-COLOR-2: var(--IDS-COLOR-PRIMARY-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__ICON-COLOR-1: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ALERT-GLOBAL__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ALERT-GLOBAL-CHEVRON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL-HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  --IDS-ALERT-GLOBAL--AGENT__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-ALERT-GLOBAL--AGENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL--AGENT__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT-GLOBAL--AGENT__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
+
+  /* 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--SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BADGE--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-BADGE--SECONDARY__COLOR: var(--IDS-COLOR-NEUTRAL-50);
+
+  --IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-BADGE--NEUTRAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-BADGE--NEUTRAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  --IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-BADGE--INFO__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BADGE--INFO__COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  --IDS-BADGE--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-BADGE--ATTENTION__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-BADGE--ATTENTION__COLOR: var(--IDS-COLOR-NEUTRAL-50);
+
+  --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-PRIMARY-90);
+  --IDS-BADGE--ERROR__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+  --IDS-BADGE--ERROR__COLOR: var(--IDS-COLOR-PRIMARY-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: 0.875rem;
+  --IDS-BUTTON--S__LINE-HEIGHT: 1rem;
+  --IDS-BUTTON--S__PADDING: 0.313rem 1.438rem;
+  --IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
+  --IDS-BUTTON--M__FONT-SIZE: 1rem;
+  --IDS-BUTTON--M__PADDING: 0.438rem 1.688rem;
+  --IDS-BUTTON--L__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
+  --IDS-BUTTON--L__PADDING: 0.688rem 1.938rem;
+
+  --IDS-BUTTON__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-BUTTON__FONT-WEIGHT: 700;
+  --IDS-BUTTON__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__BORDER-RADIUS: 1.875rem;
+  --IDS-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
+  --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.2);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
+
+  --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-40);
+  --IDS-BUTTON--SECONDARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
+
+  --IDS-BUTTON--TERTIARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
+
+  --IDS-BUTTON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BUTTON--DISABLED__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+
+  --IDS-BUTTON--SEARCH__BORDER-RADIUS: 0.625rem;
+  --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: 0.625rem;
+  --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-PRIMARY-40);
+
+  /* Card */
+  --IDS-CARD__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CARD__BORDER: 0.063rem solid rgba(218, 219, 220, 1);
+  --IDS-CARD__BORDER-RADIUS: 0.625rem;
+  --IDS-CARD__BOX-SHADOW: 0 0 0.125rem 0 rgba(0, 0, 0, 0.3);
+  --IDS-CARD__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-CARD--BORDER__BORDER: 0.063rem solid rgba(218, 219, 220, 1);
+  --IDS-CARD--BORDER__BORDER-TOP: 0.25rem solid var(--IDS-COLOR-PRIMARY-40);
+  --IDS-CARD--BORDER-2__BORDER-TOP: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-CARD--HOVER__BOX-SHADOW: 0 0 0.625rem 0 rgba(0, 0, 0, 0.3);
+  --IDS-CARD--FILL__BACKGROUND: var(--IDS-COLOR-PRIMARY-90);
+  --IDS-CARD--FILL__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-30);
+  --IDS-CARD--FILL__BORDER-INTERACTIVE: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+  --IDS-CARD--FILL-2__BACKGROUND: var(--IDS-COLOR-ACCENT-95);
+  --IDS-CARD--FILL-2__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+
+  /* Carousel */
+  --IDS-CAROUSEL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CAROUSEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-CAROUSEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-CAROUSEL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-CAROUSEL-HEADLINE__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-CAROUSEL-SLIDES__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-CAROUSEL-DESCRIPTION__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-CAROUSEL__DESCRIPTION-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --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.625rem 0.625rem 0.313rem 0.313rem;
+  --IDS-DATA-TABLE__HEAD-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-DATA-TABLE__CELL-BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-DATA-TABLE__ROW--SELECTED__COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-DATA-TABLE__CELL-BORDER_COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  /* Date label */
+  --IDS-DATE-LABEL__DAY-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-DATE-LABEL__DAY-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-DATE-LABEL__MONTH-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-DATE-LABEL__MONTH-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DATE-LABEL__YEAR-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-DATE-LABEL__YEAR-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  /* 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: 700;
+  --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-PRIMARY-30);
+  --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-PRIMARY-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-50);
+  --IDS-DIALOG__BORDER-RADIUS: 0.625rem;
+  --IDS-DIALOG__HEADLINE-FONT-WEIGHT: 700;
+  --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-50);
+  --IDS-DROPDOWN__LINK-BORDER-RADIUS: 0.313rem;
+
+  /* Expandable */
+  --IDS-EXPANDABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-EXPANDABLE__HEADLINE-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-EXPANDABLE__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-EXPANDABLE__HEADLINE-FONT-WEIGHT: 700;
+  --IDS-EXPANDABLE__HEADLINE-FONT-SIZE: 1.5rem;
+  --IDS-EXPANDABLE__HEADLINE-2-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-EXPANDABLE__ICON-2-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-EXPANDABLE--MOBILE__HEADLINE-FONT-SIZE: 1.375rem;
+  --IDS-EXPANDABLE--CHILD__HEADLINE-FONT-SIZE: 1.25rem;
+
+  /* Footer old */
+  --footer_background-color: var(--IDS-COLOR-PRIMARY-90);
+  --footer-content_color: var(--IDS-COLOR-NEUTRAL-20);
+  --footer_box-shadow: none;
+  --footer_margin-top: 1.875rem;
+  --footer-headline_color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-headline-sub_color: var(--IDS-COLOR-PRIMARY-30);
+  --footer-headline_font-family: var(--IDS-FONT-FAMILY-HEADING);
+  --footer-headline_font-weight: bold;
+  --footer-headline_font-size: 1.5rem;
+  --footer-headline_line-height: 1.875rem;
+  --footer-inner_padding-top: 1.875rem;
+  --footer-inner_padding-bottom: 6.25rem;
+  --footer-inner-mobile_padding-bottom: 3.125rem;
+  --footer-link_color: var(--IDS-COLOR-PRIMARY-35);
+  --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-sub_border: none;
+  --footer-sub_padding-bottom: 1.25rem;
+  --footer-sub_padding-top: 0.313rem;
+  --footer-sub-text_color: var(--IDS-COLOR-NEUTRAL-100);
+  --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
+  --footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-sub-mobile_padding-top: 0;
+
+  /* Header */
+  --header-main_background: linear-gradient(
+    90deg,
+    var(--IDS-COLOR-PRIMARY-40) 50%,
+    var(--IDS-COLOR-PRIMARY-90) 50%
+  );
+  --header-main_padding: 0;
+  --header-inner_background: var(--IDS-COLOR-PRIMARY-90);
+  --header-inner_height: 7.5rem;
+  --header-nav_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-menu_color: var(--IDS-COLOR-PRIMARY-30);
+  --header-nav-mobile_background-color: var(--IDS-COLOR-PRIMARY-90);
+  --header-nav-item_color: var(--IDS-COLOR-PRIMARY-35);
+  --header-nav-item_font-size: 1.25rem;
+  --header-nav-item_font-family: var(--IDS-FONT-FAMILY-HEADING);
+  --header-nav-item_padding: 0.938rem 0.625rem;
+  --header-nav-item-active_color: var(--IDS-COLOR-PRIMARY-35);
+  --header-nav-item-expanded_color: var(--IDS-COLOR-PRIMARY-35);
+  --header-nav-item-after_background: var(--IDS-COLOR-PRIMARY-40);
+  --header-nav-item-after_content: "";
+  --header-nav-item-content_background: var(--IDS-COLOR-PRIMARY-90);
+  --header-nav-item-content-before_background: #f9e1e3;
+  --header-nav-item-link_border-bottom: 0.063rem solid #dfa9b8;
+
+  /* Icons */
+  --IDS-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON__COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ICON--ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ICON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  --IDS-ICON__COLOR-PRESET-1: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON__COLOR-PRESET-1-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-ICON__COLOR-PRESET-2: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-ICON__COLOR-PRESET-2-2: var(--IDS-COLOR-PRIMARY-30);
+  --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-35);
+  --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-35);
+
+  --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-HEADING);
+
+  /* Mobile menu */
+  --IDS-MOBILE-MENU__AVATAR-LINK-COLOR: var(--IDS-COLOR-PRIMARY-35);
+
+  /* Level 1 */
+  --IDS-MOBILE-MENU-ITEM__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM__FONT-WEIGHT: 700;
+  --IDS-MOBILE-MENU-ITEM__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  /* 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-PRIMARY-90);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --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-PRIMARY-40);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --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__FONT-WEIGHT: 700;
+  --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: 0.063rem solid var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --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__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  /* VARIATION 2 - Level 3 */
+  --IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-MOBILE-MENU-2-ITEM--L3__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-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);
+
+  /* --- end of mobile menu */
+
+  /* Navigation content */
+  --IDS-NAVIGATION-CONTENT__BORDER-RADIUS: 0.625rem;
+  --IDS-NAVIGATION-CONTENT__BORDER-TOP: 0.25rem solid var(---IDS-COLOR-ACCENT-40);
+  --IDS-NAVIGATION-CONTENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 700;
+  --IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
+  --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 1.5rem;
+  --IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-90);
+
+  /* Navigation local */
+  --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid rgba(193, 33, 67, 0.3);
+  --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 0.063rem solid rgba(106, 0, 50, 0.3);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
+
+  /* Notification */
+  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+
+  /* 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-40);
+
+  /* Popover */
+  --IDS-POPOVER-CONTENT__BORDER: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-POPOVER-CONTENT__BORDER-RADIUS: 0.625rem;
+  --IDS-POPOVER__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Side menu */
+  --IDS-SIDE-MENU__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-SIDE-MENU__LINK-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+
+  /* Side panel */
+  --IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Stepper */
+  --IDS-STEP__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-STEP__HEADLINE-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-STEP__HEADLINE-LETTER-SPACING: -0.25rem;
+  --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-50);
+  --IDS-STEP__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --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-HEADING);
+  --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-30);
+  --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-PRIMARY-40);
+  --IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --IDS-STEP--INVALID__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+
+  /* Spinner */
+  --IDS-SPINNER__COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Table */
+  --IDS-TABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+  --IDS-TABLE__BORDER-RADIUS: 0.625rem 0.625rem 0 0;
+  --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
+  --IDS-TABLE__CELL-BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
+
+  /* Tab */
+  --IDS-TABS__BORDER-BOTTOM: 0.25rem solid var(--IDS-COLOR-ACCENT-90);
+  --IDS-TAB__BORDER: 0.063rem solid transparent;
+  --IDS-TAB--SELECTED-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-TAB__BORDER-RADIUS: 0.625rem 0.625rem 0 0;
+  --IDS-TAB__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAB--SELECTED__BOX-SHADOW: 0 0 0.25rem rgba(0, 0, 0, 0.3);
+  --IDS-TAB--SELECTED__BEFORE-CONTENT: none;
+  --IDS-TAB--SELECTED__AFTER-HEIGHT: 0.313rem;
+  --IDS-TAB--SELECTED__AFTER-BOTTOM: -0.313rem;
+  --IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  /* Tag */
+  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-TAG__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-TAG__BORDER-RADIUS: 0.313rem;
+  --IDS-TAG__PADDING: 0.438rem 0.938rem;
+  --IDS-TAG__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: 700;
+  --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  /* Tooltip */
+  --IDS-TOOLTIP__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TOOLTIP__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+}
+
+/**********************
+* BASE 
+* Note that this CSS only affects the core components
+**********************/
+
+/* 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-50);
+  border: none;
+}
+
+.ids-scrollbar {
+  @include partials.ids-scrollbar();
+}
+
+.ids-label {
+  @include partials.ids-label();
+}
+
+.ids-label-wrapper {
+  @include partials.ids-label-wrapper();
+}
+
+/* Thematic classes */
+.ids-show-1177 {
+  display: block;
+}
+.ids-hide-1177 {
+  display: none;
+}
+.ids-show-1177-force {
+  display: block !important;
+}
+.ids-show-1177-all {
+  display: block !important;
+}