@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/src/components/multiSelect/index.scss

@@ -1,61 +1,71 @@
 @use 'exports' as *;
 
 .multiSelect {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:has(.multipleSelect-displayer-search:focus-visible) {
-		@include focused;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
-		@include invalid;
+		&.mod-filterPill {
+			@include filterPill;
+		}
 	}
 
-	&:has(.multipleSelect-displayer-search:disabled) {
-		@include disabled;
-	}
+	@layer states {
+		&.is-selected {
+			@include selected;
+		}
 
-	&:has([aria-expanded='true']) {
-		@include expanded;
-	}
+		&:has(.multipleSelect-displayer-search:focus-visible) {
+			@include focused;
+		}
 
-	&:not(.mod-noClueIcon) {
-		&:has(.multipleSelect-displayer-search:focus-visible),
-		&:has([aria-expanded='true']) {
-			&:not(:has(.multipleSelect-displayer-search:read-only)) {
-				@include searchable;
-			}
+		&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
+			@include invalid;
 		}
-	}
 
-	&.is-selected {
-		@include selected;
-	}
+		&:has(.multipleSelect-displayer-search:disabled) {
+			@include disabled;
+		}
+
+		&:has([aria-expanded='true']) {
+			@include expanded;
+		}
 
-	&.mod-filterPill {
-		@include filterPill;
+		&:not(.mod-noClueIcon) {
+			&:has(.multipleSelect-displayer-search:focus-visible),
+			&:has([aria-expanded='true']) {
+				&:not(:has(.multipleSelect-displayer-search:read-only)) {
+					@include searchable;
+				}
+			}
+		}
 	}
 }
 
 .multipleSelect-displayer-filter {
-	min-inline-size: 0;
+	@layer components {
+		min-inline-size: 0;
+	}
 }
 
 .multipleSelect-displayer {
-	&.mod-filter {
-		@include displayerFilter;
+	@layer mods {
+		&.mod-filter {
+			@include displayerFilter;
 
-		&.is-filled {
-			@include displayerFilterFilled;
-		}
+			&.is-filled {
+				@include displayerFilterFilled;
+			}
 
-		&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
-			@include displayerFilterExpanded;
+			&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
+				@include displayerFilterExpanded;
+			}
 		}
 	}
 }

package/src/components/navside/index.scss

@@ -3,87 +3,105 @@
 @use 'exports' as *;
 
 .navSide {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
 
-	.appLayout-navSide & {
-		@include media.min('S') {
-			@include inAppLayoutWide;
-		}
+		.appLayout-navSide & {
+			@include media.min('S') {
+				@include inAppLayoutWide;
+			}
 
-		@include media.max('S') {
-			@include inAppLayoutNarrow;
+			@include media.max('S') {
+				@include inAppLayoutNarrow;
+			}
 		}
 	}
 
-	&.mod-withBanner {
-		@include banner;
-	}
+	@layer mods {
+		&.mod-withBanner {
+			@include banner;
+		}
 
-	&.mod-compact {
-		@include media.min('S') {
-			@include compact;
+		&.mod-compact {
+			@include media.min('S') {
+				@include compact;
 
-			.navSide-item-link {
-				&:hover {
-					@include compactHover;
-				}
+				.navSide-item-link {
+					&:hover {
+						@include compactHover;
+					}
 
-				&:is(.is-active, .active) {
-					@include compactActive;
+					&:is(.is-active, .active) {
+						@include compactActive;
+					}
 				}
 			}
 		}
 	}
 
-	@include media.max('S') {
-		@include mobile;
+	@layer mods {
+		@include media.max('S') {
+			@include mobile;
+		}
+	}
 
-		&:not(.is-open, .open) {
-			.navSide-item {
-				&:not(.mod-mobileToggle) {
-					@include mobileHidden;
+	@layer states {
+		@include media.max('S') {
+			&:not(.is-open, .open) {
+				.navSide-item {
+					&:not(.mod-mobileToggle) {
+						@include mobileHidden;
+					}
 				}
 			}
-		}
 
-		&.mod-withBanner {
-			.navSide-item {
-				&.mod-mobileToggle {
-					@include banner;
+			&:is(.is-open, .open) {
+				@include mobileOpen;
+
+				&.mod-withBanner {
+					@include mobileOpenBanner;
 				}
 			}
 		}
+	}
 
-		&:is(.is-open, .open) {
-			@include mobileOpen;
-
+	@layer mods {
+		@include media.max('S') {
 			&.mod-withBanner {
-				@include mobileOpenBanner;
+				.navSide-item {
+					&.mod-mobileToggle {
+						@include banner;
+					}
+				}
 			}
 		}
 	}
 }
 
 .navSide-item {
-	&:not(.is-open) {
-		@include notOpen;
+	@layer mods {
+		&.mod-mobileToggle {
+			@include mobileToggle;
+		}
 	}
 
-	&.mod-mobileToggle {
-		@include mobileToggle;
-	}
+	@layer states {
+		&:not(.is-open) {
+			@include notOpen;
+		}
 
-	&:is(.is-open, .open) {
-		@include expanded;
+		&:is(.is-open, .open) {
+			@include expanded;
 
-		.navSide-item-subMenu-link {
-			&:is(:hover) {
-				@include sublinkHover;
-			}
+			.navSide-item-subMenu-link {
+				&:is(:hover) {
+					@include sublinkHover;
+				}
 
-			&:is(.is-active, .active) {
-				@include sublinkActive;
+				&:is(.is-active, .active) {
+					@include sublinkActive;
+				}
 			}
 		}
 	}
@@ -91,19 +109,23 @@
 
 .navSide-item-subMenu-link,
 .navSide-item-link {
-	&:is(.is-active, .active) {
-		@include active;
-	}
+	@layer states {
+		&:is(.is-active, .active) {
+			@include active;
+		}
 
-	&:is([aria-expanded='true']) {
-		@include expanded;
+		&:is([aria-expanded='true']) {
+			@include expanded;
+		}
 	}
 }
 
 html {
-	&:is(.hasMenu, .withMenu) {
-		@include media.max('S') {
-			@include overlay;
+	@layer states {
+		&:is(.hasMenu, .withMenu) {
+			@include media.max('S') {
+				@include overlay;
+			}
 		}
 	}
 }

package/src/components/newBadge/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .newBadge {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-inverted {
-		@include inverted;
+	@layer mods {
+		&.mod-inverted {
+			@include inverted;
+		}
 	}
 }

package/src/components/notchBox/index.scss

@@ -1,22 +1,26 @@
 @use 'exports' as *;
 
 .notchBox {
-	@include vars;
-	@include component;
-
-	&.mod-notchTop {
-		@include notchTop;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-notchLeft {
-		@include notchLeft;
-	}
+	@layer mods {
+		&.mod-notchTop {
+			@include notchTop;
+		}
 
-	&.mod-notchRight {
-		@include notchRight;
-	}
+		&.mod-notchLeft {
+			@include notchLeft;
+		}
+
+		&.mod-notchRight {
+			@include notchRight;
+		}
 
-	&.mod-notchBottom {
-		@include notchBottom;
+		&.mod-notchBottom {
+			@include notchBottom;
+		}
 	}
 }

package/src/components/notchBox/mods.scss

@@ -1,140 +1,149 @@
 // stylelint-disable custom-property-empty-line-before -- Complex code with visual grouping of declarations.
 
 %commons {
-	--smooth: 1px;
-	--component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
-	--component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
-	--component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
-	--component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
-		var(--component-notchbox-notch-radius-inner);
-	--component-notchbox-badge-anchor: calc(
-		var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
-	);
+	@layer mods {
+		--smooth: 1px;
+		--component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
+		--component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
+		--component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
+		--component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
+			var(--component-notchbox-notch-radius-inner);
+		--component-notchbox-badge-anchor: calc(
+			var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
+		);
+	}
 }
 
 %mod-vertical {
-	@extend %commons;
-	--component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
-	--component-notchbox-notch-gradient1-ref1: 100%;
-	--component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
-
-	--component-notchbox-notch-gradient2-anchor: left;
-	--component-notchbox-notch-gradient2-ref1: calc(
-		var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
-			2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
-	);
-	--component-notchbox-notch-gradient2-ref2: 100%;
-
-	--component-notchbox-notch-gradient3-anchor: right;
-	--component-notchbox-notch-gradient3-ref1: calc(
-		100% -
-			(
-				var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
-					var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
-			)
-	);
-	--component-notchbox-notch-gradient3-ref2: 100%;
-
-	--component-notchbox-notch-gradient4-x: calc(
-		var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
-			2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
-	);
-
-	--component-notchbox-notch-gradient5-x: calc(
-		var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
-			var(--smooth)
-	);
-	--component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
-
-	--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
-	--component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
-	--component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
-
-	--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
-	--component-notchbox-notch-gradient7-ref1: calc(
-		100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
-	);
-	--component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
-
-	--component-notchbox-notch-gradient8-x: calc(
-		var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
-			var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
-	);
-
-	--component-notchbox-notch-gradient9-x: calc(
-		var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
-			var(--smooth) * 2
-	);
-	--component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
-
-	/** badge */
-	--component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
-	--component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
-	--component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
+	@layer mods {
+		@extend %commons;
+
+		--component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
+		--component-notchbox-notch-gradient1-ref1: 100%;
+		--component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
+
+		--component-notchbox-notch-gradient2-anchor: left;
+		--component-notchbox-notch-gradient2-ref1: calc(
+			var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
+				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
+		);
+		--component-notchbox-notch-gradient2-ref2: 100%;
+
+		--component-notchbox-notch-gradient3-anchor: right;
+		--component-notchbox-notch-gradient3-ref1: calc(
+			100% -
+				(
+					var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
+						var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
+				)
+		);
+		--component-notchbox-notch-gradient3-ref2: 100%;
+
+		--component-notchbox-notch-gradient4-x: calc(
+			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
+				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
+		);
+
+		--component-notchbox-notch-gradient5-x: calc(
+			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
+				var(--smooth)
+		);
+		--component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
+
+		--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
+		--component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
+		--component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
+
+		--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
+		--component-notchbox-notch-gradient7-ref1: calc(
+			100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
+		);
+		--component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
+
+		--component-notchbox-notch-gradient8-x: calc(
+			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
+				var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
+		);
+
+		--component-notchbox-notch-gradient9-x: calc(
+			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
+				var(--smooth) * 2
+		);
+		--component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
+
+		// badge
+		--component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
+		--component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
+		--component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
+	}
 }
 
 %mod-horizontal {
-	@extend %commons;
-	--component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
-	--component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
-	--component-notchbox-notch-gradient1-ref2: 100%;
-
-	--component-notchbox-notch-gradient2-anchor: top;
-	--component-notchbox-notch-gradient2-ref1: 100%;
-	--component-notchbox-notch-gradient2-ref2: calc(
-		var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
-	);
-
-	--component-notchbox-notch-gradient3-anchor: bottom;
-	--component-notchbox-notch-gradient3-ref1: 100%;
-	--component-notchbox-notch-gradient3-ref2: calc(
-		100% -
-			(
-				var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
-					var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
-			)
-	);
-
-	--component-notchbox-notch-gradient4-y: calc(
-		var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
-			2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
-	);
-
-	--component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
-	--component-notchbox-notch-gradient5-y: calc(
-		var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
-			var(--smooth)
-	);
-
-	--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
-	--component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
-	--component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
-
-	--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
-	--component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
-	--component-notchbox-notch-gradient7-ref2: calc(
-		100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
-	);
-
-	--component-notchbox-notch-gradient8-y: calc(
-		var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
-			var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
-	);
-
-	--component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
-	--component-notchbox-notch-gradient9-y: calc(
-		var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
-			var(--smooth) * 2
-	);
-
-	/** badge */
-	--component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
-	--component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
-	--component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
+	@layer mods {
+		@extend %commons;
+
+		--component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
+		--component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
+		--component-notchbox-notch-gradient1-ref2: 100%;
+
+		--component-notchbox-notch-gradient2-anchor: top;
+		--component-notchbox-notch-gradient2-ref1: 100%;
+		--component-notchbox-notch-gradient2-ref2: calc(
+			var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
+		);
+
+		--component-notchbox-notch-gradient3-anchor: bottom;
+		--component-notchbox-notch-gradient3-ref1: 100%;
+		--component-notchbox-notch-gradient3-ref2: calc(
+			100% -
+				(
+					var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
+						var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
+				)
+		);
+
+		--component-notchbox-notch-gradient4-y: calc(
+			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
+				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
+		);
+
+		--component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
+		--component-notchbox-notch-gradient5-y: calc(
+			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
+				var(--smooth)
+		);
+
+		--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
+		--component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
+		--component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
+
+		--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
+		--component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
+		--component-notchbox-notch-gradient7-ref2: calc(
+			100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
+		);
+
+		--component-notchbox-notch-gradient8-y: calc(
+			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
+				var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
+		);
+
+		--component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
+		--component-notchbox-notch-gradient9-y: calc(
+			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
+				var(--smooth) * 2
+		);
+
+		// badge
+		--component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
+		--component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
+		--component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
+	}
 }
 
 @mixin top {
 	@extend %mod-vertical;
+
 	--component-notchbox-notch-gradient1-anchor: bottom;
 	--component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
 
@@ -149,6 +158,7 @@
 
 @mixin bottom {
 	@extend %mod-vertical;
+
 	--component-notchbox-notch-gradient1-anchor: top;
 	--component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
 
@@ -163,6 +173,7 @@
 
 @mixin left {
 	@extend %mod-horizontal;
+
 	--component-notchbox-notch-gradient1-anchor: right;
 	--component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
 	--component-notchbox-notch-gradient8-anchor: 0 100%;
@@ -176,6 +187,7 @@
 
 @mixin right {
 	@extend %mod-horizontal;
+
 	--component-notchbox-notch-gradient1-anchor: left;
 	--component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
 	--component-notchbox-notch-gradient8-anchor: 100% 100%;
@@ -188,7 +200,7 @@
 	--component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
 }
 
-/** pre configured with DS parameters **/
+// pre configured with DS parameters
 @mixin notchTop {
 	@include top;
 }