@unifiedsoftware/styles 1.0.10 → 1.0.12

package/scss/components/_list.scss

@@ -62,6 +62,21 @@
 		}
 
 		&__title {
+			font-size: var(--#{$prefix}list-item-title-font-size);
+			font-weight: var(--#{$prefix}list-item-title-font-weight);
+			line-height: var(--#{$prefix}list-item-title-line-height);
+			opacity: var(--#{$prefix}list-item-title-opacity);
+			overflow: hidden;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 1;
+		}
+
+		&__subtitle {
+			font-size: var(--#{$prefix}list-item-subtitle-font-size);
+			font-weight: var(--#{$prefix}list-item-subtitle-font-weight);
+			line-height: var(--#{$prefix}list-item-subtitle-line-height);
+			opacity: var(--#{$prefix}list-item-subtitle-opacity);
 			overflow: hidden;
 			display: -webkit-box;
 			-webkit-box-orient: vertical;

package/scss/components/_popover.scss

@@ -0,0 +1,55 @@
+@use '../variables' as *;
+
+.#{$prefix}popover {
+	min-width: 240px;
+	position: absolute;
+	border-radius: 0.25rem;
+	box-shadow:
+		rgba(0, 0, 59, 0.05) 0px 0px 0px 1px,
+		rgba(1, 1, 46, 0.133) 0px 12px 60px 0px,
+		rgba(0, 0, 0, 0.133) 0px 12px 32px -16px;
+	background-color: #fff;
+	overflow: hidden;
+	z-index: 40;
+	display: flex;
+	flex-direction: column;
+
+	&__overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		border-radius: inherit;
+		background-color: #fff;
+		opacity: 1;
+		z-index: 0;
+	}
+
+	&-enter {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+
+	&-enter-active {
+		opacity: 1;
+		transform: scale(1);
+		transition:
+			opacity 100ms,
+			transform 200ms;
+	}
+
+	&-exit {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	&-exit-active {
+		opacity: 0;
+		transform: scale(0.9);
+		transition:
+			opacity 150ms,
+			transform 150ms;
+	}
+}

package/scss/components/_scroll-area.scss

@@ -1,21 +1,39 @@
 @use '../variables' as *;
 
 .#{$prefix}scroll-area {
-	&::-webkit-scrollbar {
-		width: 12px;
+	&__track {
+		position: absolute;
+		border-radius: 3px;
+		right: 2px;
+		bottom: 2px;
 	}
 
-	&::-webkit-scrollbar-track {
-		box-shadow: inset 0 0 0px 2px #fff;
+	&__track--horizontal {
+		height: 6px;
+		left: 2px;
 	}
 
-	&::-webkit-scrollbar-thumb {
-		background-color: #ccd2d9;
-		box-shadow: inset 0 0 0px 2px #fff;
-		border-radius: 6px;
+	&__track--vertical {
+		width: 6px;
+		top: 2px;
 	}
 
-	&--vertical {
-		overflow-y: auto;
+	&__thumb {
+		position: relative;
+		display: block;
+		cursor: pointer;
+		border-radius: inherit;
+		background-color: rgba(0, 0, 0, 0.2);
+		transform: translateX(0px);
+	}
+
+	&__thumb--horizontal {
+		height: 100%;
+		width: 105px;
+	}
+
+	&__thumb--vertical {
+		width: 100%;
+		height: 463px;
 	}
 }

package/scss/components/_switch.scss

@@ -0,0 +1,39 @@
+@use '../variables' as *;
+@use '../mixins/overlay' as *;
+
+.#{$prefix}switch {
+	position: relative;
+	display: inline-block;
+	width: var(--#{$prefix}switch-width);
+	padding-block: var(--#{$prefix}switch-padding-y);
+	border-radius: var(--#{$prefix}switch-border-radius);
+	cursor: pointer;
+	background-color: var(--#{$prefix}switch-color);
+	display: inline-flex;
+	align-items: center;
+	transition: all 0.2s ease-in-out;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	&--checked &__thumb {
+		transform: translateX(
+			calc(var(--#{$prefix}switch-width) - var(--#{$prefix}switch-thumb-width) - (var(--#{$prefix}switch-padding-x)))
+		);
+	}
+
+	&__thumb {
+		width: var(--#{$prefix}switch-thumb-width);
+		height: var(--#{$prefix}switch-thumb-height);
+		transform: translateX(var(--#{$prefix}switch-padding-x));
+		border-radius: var(--#{$prefix}switch-thumb-border-radius);
+		background-color: var(--#{$prefix}switch-thumb-color);
+		transition: all 0.2s ease-in-out;
+	}
+}

package/scss/mixins/_outline.scss

@@ -6,7 +6,48 @@
 		inset: 0px;
 		border-radius: inherit;
 		overflow: hidden;
-		border: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
+		border-width: var(--#{$prefix}outline-border-width);
+		border-style: solid;
+		border-color: var(--#{$prefix}outline-border-color);
+		opacity: var(--#{$prefix}outline-opacity);
+	}
+
+	&:hover > .#{$prefix}outline {
+		border-width: var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width));
+		border-color: var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color));
+		opacity: var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity));
+	}
+
+	&:active > .#{$prefix}outline {
+		border-width: var(
+			--#{$prefix}outline-active-border-width,
+			var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
+		);
+		border-color: var(
+			--#{$prefix}outline-active-border-color,
+			var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
+		);
+		opacity: var(
+			--#{$prefix}outline-active-opacity,
+			var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
+		);
+	}
+
+	&--focus > .#{$prefix}outline,
+	&--focus:hover > .#{$prefix}outline,
+	&:focus > .#{$prefix}outline {
+		border-width: var(
+			--#{$prefix}outline-focus-border-width,
+			var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
+		);
+		border-color: var(
+			--#{$prefix}outline-focus-border-color,
+			var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
+		);
+		opacity: var(
+			--#{$prefix}outline-focus-opacity,
+			var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
+		);
 	}
 }
 

package/scss/themes/{default → fci}/_tokens.scss

@@ -1,6 +1,6 @@
 @use '../../variables' as *;
 
-:root {
+.#{$prefix}theme-fci {
 	--#{$prefix}primary-color: #990000;
 	--#{$prefix}secondary-color: #dde4eb;
 	--#{$prefix}success-color: #e1ae30;

package/scss/themes/fci/components/_badge.scss

@@ -0,0 +1,24 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}badge {
+		--#{$prefix}badge-padding-y: 0.125rem;
+		--#{$prefix}badge-padding-x: 0.325rem;
+		--#{$prefix}badge-font-size: 0.75rem;
+		--#{$prefix}badge-font-weight: 700;
+		--#{$prefix}badge-border-radius: 9999px;
+		--#{$prefix}badge-border-width: 2px;
+		--#{$prefix}badge-border-color: var(--#{$prefix}white-color);
+		--#{$prefix}badge-color: var(--#{$prefix}white-color);
+		--#{$prefix}badge-background: var(--#{$prefix}primary-color);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0.08;
+			--#{$prefix}_hover-overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-color: inherit;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+	}
+}

package/scss/themes/fci/components/_button.scss

@@ -0,0 +1,156 @@
+@use '../../../variables' as *;
+@use '../../../mixins/button' as *;
+
+$colors-map: (
+	primary: var(--#{$prefix}primary-color),
+	secondary: var(--#{$prefix}secondary-color),
+	success: var(--#{$prefix}success-color),
+	info: var(--#{$prefix}info-color),
+	warning: var(--#{$prefix}warning-color),
+	danger: var(--#{$prefix}danger-color),
+);
+
+.#{$prefix}theme-fci {
+	.#{$prefix}button {
+		--#{$prefix}button-font-weight: 500;
+		--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-opacity: 0.12;
+			--#{$prefix}_active-overlay-opacity: 0.24;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: transparent;
+		}
+
+		&--xs {
+			--#{$prefix}button-height: 20px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 0.5rem;
+			--#{$prefix}button-font-size: 0.625rem;
+			--#{$prefix}button-border-radius: 4px;
+			--#{$prefix}button-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}button-height: 28px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 0.75rem;
+			--#{$prefix}button-font-size: 0.75rem;
+			--#{$prefix}button-border-radius: 4px;
+			--#{$prefix}button-gap: 0.375rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}button-height: 36px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1rem;
+			--#{$prefix}button-font-size: 0.875rem;
+			--#{$prefix}button-border-radius: 4px;
+			--#{$prefix}button-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}button-height: 44px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1.25rem;
+			--#{$prefix}button-font-size: 1rem;
+			--#{$prefix}button-border-radius: 4px;
+			--#{$prefix}button-gap: 0.625rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.25rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}button-height: 52px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1.5rem;
+			--#{$prefix}button-font-size: 1rem;
+			--#{$prefix}button-border-radius: 4px;
+			--#{$prefix}button-gap: 0.75rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.5rem;
+			}
+		}
+
+		&--filled {
+			--#{$prefix}button-border-width: 1px;
+			--#{$prefix}button-border-color: transparent;
+			--#{$prefix}button-color: var(--#{$prefix}white-color);
+
+			.#{$prefix}chip {
+				--#{$prefix}chip-background: var(--#{$prefix}white-color);
+			}
+		}
+
+		&--outlined {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: currentColor;
+			}
+		}
+
+		&--flat {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-opacity: 0.08;
+				--#{$prefix}_hover-overlay-opacity: 0.12;
+				--#{$prefix}_active-overlay-opacity: 0.24;
+			}
+		}
+	}
+
+	@each $key, $value in $colors-map {
+		.#{$prefix}button--filled.#{$prefix}button--#{$key} {
+			--#{$prefix}button-background: #{$value};
+		}
+
+		.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
+			--#{$prefix}button-color: #{$value};
+		}
+
+		.#{$prefix}button--flat.#{$prefix}button--#{$key} {
+			--#{$prefix}button-color: #{$value};
+		}
+
+		.#{$prefix}button--text.#{$prefix}button--#{$key} {
+			--#{$prefix}button-color: #{$value};
+		}
+
+		@if $key == 'secondary' {
+			.#{$prefix}button--filled.#{$prefix}button--#{$key} {
+				--#{$prefix}button-color: var(--#{$prefix}black-color);
+			}
+
+			.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
+				--#{$prefix}button-color: var(--#{$prefix}black-color);
+			}
+
+			.#{$prefix}button--flat.#{$prefix}button--#{$key} {
+				--#{$prefix}button-color: var(--#{$prefix}black-color);
+			}
+
+			.#{$prefix}button--text.#{$prefix}button--#{$key} {
+				--#{$prefix}button-color: var(--#{$prefix}black-color);
+			}
+		}
+	}
+}

package/scss/themes/fci/components/_card.scss

@@ -0,0 +1,21 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}card {
+		--#{$prefix}card-border-width: 1px;
+		--#{$prefix}card-border-style: solid;
+		--#{$prefix}card-border-color: rgba(9, 30, 66, 0.14);
+		--#{$prefix}card-border-radius: 8px;
+	}
+	.#{$prefix}card-header {
+		--#{$prefix}card-header-padding-y: 1rem;
+		--#{$prefix}card-header-padding-x: 1rem;
+		--#{$prefix}card-header-gap: 1rem;
+	}
+
+	.#{$prefix}card-header__title {
+		--#{$prefix}card-header-title-font-size: 0.75rem;
+		--#{$prefix}card-header-title-font-weight: 600;
+		--#{$prefix}card-header-title-line-height: 24px;
+	}
+}

package/scss/themes/fci/components/_chip.scss

@@ -0,0 +1,127 @@
+@use '../../../variables' as *;
+@use '../../../mixins/chip' as *;
+@use '../../../mixins/overlay' as *;
+
+$colors-map: (
+	primary: var(--#{$prefix}primary-color),
+	secondary: var(--#{$prefix}secondary-color),
+	success: var(--#{$prefix}success-color),
+	info: var(--#{$prefix}info-color),
+	warning: var(--#{$prefix}warning-color),
+	danger: var(--#{$prefix}danger-color),
+);
+
+.#{$prefix}theme-fci {
+	.#{$prefix}chip {
+		--#{$prefix}chip-padding-y: 0.125rem;
+		--#{$prefix}chip-padding-x: 0.5rem;
+		--#{$prefix}chip-font-size: 0.75rem;
+		--#{$prefix}chip-font-weight: 700;
+		--#{$prefix}chip-border-radius: 9999px;
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: transparent;
+		}
+
+		&--xs {
+			--#{$prefix}chip-height: 28px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 0.5rem;
+			--#{$prefix}chip-font-size: 0.75rem;
+			--#{$prefix}chip-border-radius: 9999px;
+			--#{$prefix}chip-gap: 0.375rem;
+			--#{$prefix}chip-icon-font-size: 0.75rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}chip-height: 32px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 0.75rem;
+			--#{$prefix}chip-font-size: 14px;
+			--#{$prefix}chip-gap: 0.375rem;
+			--#{$prefix}chip-icon-font-size: 0.875rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.875rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}chip-height: 40px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 1rem;
+			--#{$prefix}chip-font-size: 14px;
+			--#{$prefix}chip-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}chip-height: 48px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 1.5rem;
+			--#{$prefix}chip-font-size: 1rem;
+			--#{$prefix}chip-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}chip-height: 48px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 1.5rem;
+			--#{$prefix}chip-font-size: 1rem;
+			--#{$prefix}chip-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.25rem;
+			}
+		}
+
+		&--filled {
+			--#{$prefix}chip-border-width: 1px;
+			--#{$prefix}chip-border-color: transparent;
+			--#{$prefix}chip-color: var(--#{$prefix}white-color);
+		}
+
+		&--outlined {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: currentColor;
+			}
+		}
+	}
+
+	@each $key, $value in $colors-map {
+		.#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
+			--#{$prefix}chip-background: #{$value};
+		}
+
+		@if $key == 'secondary' {
+			.#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
+				--#{$prefix}chip-color: var(--#{$prefix}black-color);
+			}
+		}
+
+		.#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
+			--#{$prefix}chip-color: #{$value};
+		}
+
+		.#{$prefix}chip--text.#{$prefix}chip--#{$key} {
+			--#{$prefix}chip-color: #{$value};
+		}
+	}
+}

package/scss/themes/fci/components/_drawer.scss

@@ -0,0 +1,8 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}drawer {
+		--#{$prefix}drawer-width: 256px;
+		--#{$prefix}drawer-background: #fff;
+	}
+}

package/scss/themes/fci/components/_icon.scss

@@ -0,0 +1,8 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}icon {
+		--#{$prefix}icon-font-size: 1.5rem;
+		--#{$prefix}icon-color: inherit;
+	}
+}

package/scss/themes/{default → fci}/components/_index.scss

@@ -8,6 +8,9 @@
 
 @use 'drawer';
 
+@use 'input';
+@use 'switch';
+
 @use 'list';
 @use 'menu';
 @use 'tabs';

package/scss/themes/fci/components/_input.scss

@@ -0,0 +1,25 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}input {
+		--#{$prefix}input-padding-y: 0rem;
+		--#{$prefix}input-padding-x: 1rem;
+		--#{$prefix}input-height: 36px;
+		--#{$prefix}input-font-size: 0.75rem;
+		--#{$prefix}input-font-family: var(--#{$prefix}font-sans);
+		--#{$prefix}input-line-height: 24px;
+		--#{$prefix}input-border-radius: 0.25rem;
+		--#{$prefix}input-gap: 0.5rem;
+		--#{$prefix}input-icon-size: 1.125rem;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: currentColor;
+			--#{$prefix}outline-opacity: 0.12;
+			--#{$prefix}outline-hover-opacity: 0.24;
+			--#{$prefix}outline-focus-border-width: 2px;
+			--#{$prefix}outline-focus-border-color: var(--#{$prefix}primary-color);
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+}

package/scss/themes/fci/components/_list.scss

@@ -0,0 +1,70 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}list {
+		--#{$prefix}list-padding-y: 0px;
+		--#{$prefix}list-padding-x: 0px;
+		--#{$prefix}list-color: #343a40;
+		--#{$prefix}list-background: #fff;
+
+		&-item {
+			--#{$prefix}list-item-height: 40px;
+			--#{$prefix}list-item-padding-y: 0px;
+			--#{$prefix}list-item-padding-x: 1rem;
+			--#{$prefix}list-item-padding-level: 1.25rem;
+			--#{$prefix}list-item-font-size: 12px;
+			--#{$prefix}list-item-font-weight: 500;
+			--#{$prefix}list-item-border-radius: 0px;
+			--#{$prefix}list-item-gap: 1rem;
+
+			--#{$prefix}list-item-title-font-size: 12px;
+			--#{$prefix}list-item-title-font-weight: 500;
+
+			--#{$prefix}list-item-subtitle-font-size: 12px;
+			--#{$prefix}list-item-subtitle-font-weight: 400;
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0;
+				--#{$prefix}_hover-overlay-color: inherit;
+				--#{$prefix}_hover-overlay-opacity: 0.04;
+				--#{$prefix}_active-overlay-opacity: 0.08;
+			}
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 16px;
+				--#{$prefix}icon-color: var(--#{$prefix}primary-color);
+			}
+
+			&--selected {
+				--#{$prefix}list-item-color: var(--#{$prefix}primary-color);
+			}
+
+			&--selected > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
+				--#{$prefix}overlay-opacity: 0.08;
+				--#{$prefix}_hover-overlay-opacity: 0.12;
+				--#{$prefix}_active-overlay-opacity: 0.16;
+			}
+		}
+
+		&-subheader {
+			--#{$prefix}list-subheader-height: 40px;
+			--#{$prefix}list-subheader-padding-y: 0;
+			--#{$prefix}list-subheader-padding-x: 1rem;
+			--#{$prefix}list-subheader-padding-level: 2rem;
+			--#{$prefix}list-subheader-font-size: 12px;
+			--#{$prefix}list-subheader-font-weight: 700;
+			--#{$prefix}list-subheader-border-radius: 0;
+			--#{$prefix}list-subheader-gap: 1rem;
+			--#{$prefix}list-subheader-border-width: 1px;
+			--#{$prefix}list-subheader-border-color: #dee2e6;
+		}
+
+		&-group > &-item--selected > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-opacity: 0;
+			--#{$prefix}_active-overlay-opacity: 0;
+		}
+	}
+}