
@use "sass:color";
@use "variables" as *;
// Do not edit directly
// Generated on
// Fri Sep 15 2023 05:28:43 GMT+0000 (Coordinated Universal Time)

%db-informational-component-ia {
	--db-current-color: var(--db-informational-on-enabled,
	#{$db-colors-informational-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-informational-enabled,
	#{$db-colors-informational-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-informational-hover,
			#{$db-colors-informational-hover});
		}
		&:active{
			background-color: var(--db-informational-pressed,
			#{$db-colors-informational-pressed});
		}
	}
}

%db-informational-component {
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-informational-on-enabled});
	background-color: var(--db-informational-enabled,
	#{$db-colors-informational-enabled});
    color: var(--db-current-color);
}

%db-bg-informational-variables {
	--db-current-base-color: var(--db-informational-enabled,
	#{$db-colors-informational-enabled});
	--db-current-color: var(--db-informational-on-bg-enabled, #{$db-colors-informational-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-informational-bg-enabled, #{$db-colors-informational-bg-enabled})
	);
    --db-current-element-color: var(--db-informational-element-enabled, #{$db-colors-informational-element-enabled});
    --db-current-border-color: var(--db-informational-border-enabled, #{$db-colors-informational-border-enabled});
    --db-current-border-weak-color: var(--db-informational-border-weak-enabled, #{$db-colors-informational-border-weak-enabled});
}

%db-bg-informational {
	@extend %db-bg-informational-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-informational-on-bg-enabled, #{$db-colors-informational-on-bg-enabled});
			@extend %db-bg-informational-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-informational;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-informational-on-bg-weak-enabled, #{$db-colors-informational-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-primary-component-ia {
	--db-current-color: var(--db-primary-on-enabled,
	#{$db-colors-primary-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-primary-enabled,
	#{$db-colors-primary-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-primary-hover,
			#{$db-colors-primary-hover});
		}
		&:active{
			background-color: var(--db-primary-pressed,
			#{$db-colors-primary-pressed});
		}
	}
}

%db-primary-component {
	--db-current-color: var(--db-primary-on-enabled, #{$db-colors-primary-on-enabled});
	background-color: var(--db-primary-enabled,
	#{$db-colors-primary-enabled});
    color: var(--db-current-color);
}

%db-bg-primary-variables {
	--db-current-base-color: var(--db-primary-enabled,
	#{$db-colors-primary-enabled});
	--db-current-color: var(--db-primary-on-bg-enabled, #{$db-colors-primary-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-primary-bg-enabled, #{$db-colors-primary-bg-enabled})
	);
    --db-current-element-color: var(--db-primary-element-enabled, #{$db-colors-primary-element-enabled});
    --db-current-border-color: var(--db-primary-border-enabled, #{$db-colors-primary-border-enabled});
    --db-current-border-weak-color: var(--db-primary-border-weak-enabled, #{$db-colors-primary-border-weak-enabled});
}

%db-bg-primary {
	@extend %db-bg-primary-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-primary-on-bg-enabled, #{$db-colors-primary-on-bg-enabled});
			@extend %db-bg-primary-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-primary;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-primary-on-bg-weak-enabled, #{$db-colors-primary-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-warning-component-ia {
	--db-current-color: var(--db-warning-on-enabled,
	#{$db-colors-warning-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-warning-enabled,
	#{$db-colors-warning-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-warning-hover,
			#{$db-colors-warning-hover});
		}
		&:active{
			background-color: var(--db-warning-pressed,
			#{$db-colors-warning-pressed});
		}
	}
}

%db-warning-component {
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-warning-on-enabled});
	background-color: var(--db-warning-enabled,
	#{$db-colors-warning-enabled});
    color: var(--db-current-color);
}

%db-bg-warning-variables {
	--db-current-base-color: var(--db-warning-enabled,
	#{$db-colors-warning-enabled});
	--db-current-color: var(--db-warning-on-bg-enabled, #{$db-colors-warning-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-warning-bg-enabled, #{$db-colors-warning-bg-enabled})
	);
    --db-current-element-color: var(--db-warning-element-enabled, #{$db-colors-warning-element-enabled});
    --db-current-border-color: var(--db-warning-border-enabled, #{$db-colors-warning-border-enabled});
    --db-current-border-weak-color: var(--db-warning-border-weak-enabled, #{$db-colors-warning-border-weak-enabled});
}

%db-bg-warning {
	@extend %db-bg-warning-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-warning-on-bg-enabled, #{$db-colors-warning-on-bg-enabled});
			@extend %db-bg-warning-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-warning;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-warning-on-bg-weak-enabled, #{$db-colors-warning-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-successful-component-ia {
	--db-current-color: var(--db-successful-on-enabled,
	#{$db-colors-successful-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-successful-enabled,
	#{$db-colors-successful-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-successful-hover,
			#{$db-colors-successful-hover});
		}
		&:active{
			background-color: var(--db-successful-pressed,
			#{$db-colors-successful-pressed});
		}
	}
}

%db-successful-component {
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-successful-on-enabled});
	background-color: var(--db-successful-enabled,
	#{$db-colors-successful-enabled});
    color: var(--db-current-color);
}

%db-bg-successful-variables {
	--db-current-base-color: var(--db-successful-enabled,
	#{$db-colors-successful-enabled});
	--db-current-color: var(--db-successful-on-bg-enabled, #{$db-colors-successful-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-successful-bg-enabled, #{$db-colors-successful-bg-enabled})
	);
    --db-current-element-color: var(--db-successful-element-enabled, #{$db-colors-successful-element-enabled});
    --db-current-border-color: var(--db-successful-border-enabled, #{$db-colors-successful-border-enabled});
    --db-current-border-weak-color: var(--db-successful-border-weak-enabled, #{$db-colors-successful-border-weak-enabled});
}

%db-bg-successful {
	@extend %db-bg-successful-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-successful-on-bg-enabled, #{$db-colors-successful-on-bg-enabled});
			@extend %db-bg-successful-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-successful;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-successful-on-bg-weak-enabled, #{$db-colors-successful-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-neutral-component-ia {
	--db-current-color: var(--db-neutral-on-enabled,
	#{$db-colors-neutral-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-neutral-enabled,
	#{$db-colors-neutral-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-neutral-hover,
			#{$db-colors-neutral-hover});
		}
		&:active{
			background-color: var(--db-neutral-pressed,
			#{$db-colors-neutral-pressed});
		}
	}
}

%db-neutral-component {
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-enabled});
	background-color: var(--db-neutral-enabled,
	#{$db-colors-neutral-enabled});
    color: var(--db-current-color);
}

%db-bg-neutral-variables {
	--db-current-base-color: var(--db-neutral-enabled,
	#{$db-colors-neutral-enabled});
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-neutral-bg-enabled, #{$db-colors-neutral-bg-0-enabled})
	);
    --db-current-element-color: var(--db-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
}

%db-bg-neutral {
	@extend %db-bg-neutral-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
			@extend %db-bg-neutral-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-neutral-on-bg-weak-enabled, #{$db-colors-neutral-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-bg-neutral-strong-variables {
	--db-current-base-color: var(--db-neutral-enabled,
	#{$db-colors-neutral-enabled});
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-neutral-bg-strong-enabled, #{$db-colors-neutral-bg-4-enabled})
	);
    --db-current-element-color: var(--db-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
}

%db-bg-neutral-strong {
	@extend %db-bg-neutral-strong-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
			@extend %db-bg-neutral-strong-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-strong;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-neutral-on-bg-weak-enabled, #{$db-colors-neutral-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	
%db-critical-component-ia {
	--db-current-color: var(--db-critical-on-enabled,
	#{$db-colors-critical-on-enabled});
    color: var(--db-current-color);
	background-color: var(--db-critical-enabled,
	#{$db-colors-critical-enabled});
	&:enabled {
		&:hover{
			background-color: var(--db-critical-hover,
			#{$db-colors-critical-hover});
		}
		&:active{
			background-color: var(--db-critical-pressed,
			#{$db-colors-critical-pressed});
		}
	}
}

%db-critical-component {
	--db-current-color: var(--db-neutral-on-bg-enabled, #{$db-colors-critical-on-enabled});
	background-color: var(--db-critical-enabled,
	#{$db-colors-critical-enabled});
    color: var(--db-current-color);
}

%db-bg-critical-variables {
	--db-current-base-color: var(--db-critical-enabled,
	#{$db-colors-critical-enabled});
	--db-current-color: var(--db-critical-on-bg-enabled, #{$db-colors-critical-on-bg-enabled});
	--db-current-bg-color: color-mix(
		in srgb,
		transparent	var(--db-bg-transparent, 0%),
		var(--db-critical-bg-enabled, #{$db-colors-critical-bg-enabled})
	);
    --db-current-element-color: var(--db-critical-element-enabled, #{$db-colors-critical-element-enabled});
    --db-current-border-color: var(--db-critical-border-enabled, #{$db-colors-critical-border-enabled});
    --db-current-border-weak-color: var(--db-critical-border-weak-enabled, #{$db-colors-critical-border-weak-enabled});
}

%db-bg-critical {
	@extend %db-bg-critical-variables;
	background-color: var(--db-current-bg-color);
    color: var(--db-current-color);

    

	&-transparent {
		&-full, &-semi{
    		color: var(--db-critical-on-bg-enabled, #{$db-colors-critical-on-bg-enabled});
			@extend %db-bg-critical-variables;
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 100%),
				var(--db-current-base-color)
			);
		}

		&-semi{
    		background-color: color-mix(
				in srgb,
				transparent	var(--db-bg-transparent, 92%),
				var(--db-current-base-color)
			);
		}
	}

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-critical;
		&:enabled{
			&:hover{
				--db-bg-transparent: 84%;
			}
			&:active{
				--db-bg-transparent: 68%;
			}
		}
    }

    %weak {
		--db-current-color: var(--db-critical-on-bg-weak-enabled, #{$db-colors-critical-on-bg-weak-enabled});
		color: var(--db-current-color);
    }
}
	