
@use "sass:color";
@use "variables" as *;
// Do not edit directly
// Generated on
// Sat Jul 22 2023 09:54:52 GMT+0000 (Coordinated Universal Time)

%db-informational-text-ia {
	color: $db-colors-informational-enabled;

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

%db-informational-element-ia {
	color: $db-colors-informational-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-element-hover, #{$db-colors-informational-element-hover});
				color: var(--db-current-color, #{$db-colors-informational-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-element-pressed, #{$db-colors-informational-element-pressed});
				color: var(--db-current-color, #{$db-colors-informational-element-pressed});
    			
			}
        }
        
}

%db-informational-border-ia {
	color: $db-colors-informational-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-border-hover, #{$db-colors-informational-border-hover});
				color: var(--db-current-color, #{$db-colors-informational-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-border-pressed, #{$db-colors-informational-border-pressed});
				color: var(--db-current-color, #{$db-colors-informational-border-pressed});
    			
			}
        }
        
}

%db-informational-component-ia {
	background-color: $db-colors-informational-enabled;
	color: $db-colors-informational-on-enabled;

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

%db-informational-component {
	background-color: $db-colors-informational-enabled;
	color: $db-colors-informational-on-enabled;
}

%db-bg-informational-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-informational-bg-hover, #{$db-colors-informational-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-hover)};
	--db-current-background-color-green: #{color.green($db-colors-informational-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-hover)};
			}
			
        }
        
}
%db-bg-informational-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-informational-bg-pressed, #{$db-colors-informational-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-informational-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-pressed)};
			}
        }
        
}

%db-bg-informational {
    --db-current-background-color: var(--db-colors-informational-bg-enabled, #{$db-colors-informational-bg-enabled});
    --db-current-color: var(--db-colors-informational-on-bg-enabled, #{$db-colors-informational-on-bg-enabled});
    --db-current-element-color: var(--db-colors-informational-element-enabled, #{$db-colors-informational-element-enabled});
    --db-current-border-color: var(--db-colors-informational-border-enabled, #{$db-colors-informational-border-enabled});
    --db-current-border-weak-color: var(--db-colors-informational-border-weak-enabled, #{$db-colors-informational-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-informational-bg-enabled});
    color: var(--db-current-color, #{$db-colors-informational-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-informational-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-informational-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-informational;
		@extend %db-bg-informational-hover-state;
		@extend %db-bg-informational-active-state;
    }

    button {
		@extend %db-bg-informational-hover-state;
		@extend %db-bg-informational-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-on-bg-hover, #{$db-colors-informational-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-on-bg-pressed, #{$db-colors-informational-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-on-bg-weak-hover, #{$db-colors-informational-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-on-bg-weak-pressed, #{$db-colors-informational-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-informational-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-informational-bg-transparent-full-hover, #{$db-colors-informational-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-hover)};
	--db-current-background-color-green: #{color.green($db-colors-informational-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-hover)};
			}
			
        }
        
}
%db-bg-informational-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-informational-bg-transparent-full-pressed, #{$db-colors-informational-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-informational-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-pressed)};
			}
        }
        
}

%db-bg-informational-transparent-full {
    --db-current-background-color: var(--db-colors-informational-bg-transparent-full-enabled, #{$db-colors-informational-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-informational-on-bg-enabled, #{$db-colors-informational-on-bg-enabled});
    --db-current-element-color: var(--db-colors-informational-element-enabled, #{$db-colors-informational-element-enabled});
    --db-current-border-color: var(--db-colors-informational-border-enabled, #{$db-colors-informational-border-enabled});
    --db-current-border-weak-color: var(--db-colors-informational-border-weak-enabled, #{$db-colors-informational-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-informational-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-informational-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-informational-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-informational-transparent-full;
		@extend %db-bg-informational-transparent-full-hover-state;
		@extend %db-bg-informational-transparent-full-active-state;
    }

    button {
		@extend %db-bg-informational-transparent-full-hover-state;
		@extend %db-bg-informational-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-on-bg-hover, #{$db-colors-informational-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-on-bg-pressed, #{$db-colors-informational-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-on-bg-weak-hover, #{$db-colors-informational-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-on-bg-weak-pressed, #{$db-colors-informational-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-informational-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-informational-bg-transparent-semi-hover, #{$db-colors-informational-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-hover)};
	--db-current-background-color-green: #{color.green($db-colors-informational-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-hover)};
			}
			
        }
        
}
%db-bg-informational-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-informational-bg-transparent-semi-pressed, #{$db-colors-informational-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-informational-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-informational-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-pressed)};
			}
        }
        
}

%db-bg-informational-transparent-semi {
    --db-current-background-color: var(--db-colors-informational-bg-transparent-semi-enabled, #{$db-colors-informational-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-informational-on-bg-enabled, #{$db-colors-informational-on-bg-enabled});
    --db-current-element-color: var(--db-colors-informational-element-enabled, #{$db-colors-informational-element-enabled});
    --db-current-border-color: var(--db-colors-informational-border-enabled, #{$db-colors-informational-border-enabled});
    --db-current-border-weak-color: var(--db-colors-informational-border-weak-enabled, #{$db-colors-informational-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-informational-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-informational-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-informational-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-informational-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-informational-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-informational-transparent-semi;
		@extend %db-bg-informational-transparent-semi-hover-state;
		@extend %db-bg-informational-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-informational-transparent-semi-hover-state;
		@extend %db-bg-informational-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-informational-on-bg-hover, #{$db-colors-informational-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-informational-on-bg-pressed, #{$db-colors-informational-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-informational-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-hover, #{$db-colors-primary-hover});
				color: var(--db-current-color, #{$db-colors-primary-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-pressed, #{$db-colors-primary-pressed});
				color: var(--db-current-color, #{$db-colors-primary-pressed});
    			
			}
        }
        
}

%db-primary-element-ia {
	color: $db-colors-primary-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-element-hover, #{$db-colors-primary-element-hover});
				color: var(--db-current-color, #{$db-colors-primary-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-element-pressed, #{$db-colors-primary-element-pressed});
				color: var(--db-current-color, #{$db-colors-primary-element-pressed});
    			
			}
        }
        
}

%db-primary-border-ia {
	color: $db-colors-primary-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-border-hover, #{$db-colors-primary-border-hover});
				color: var(--db-current-color, #{$db-colors-primary-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-border-pressed, #{$db-colors-primary-border-pressed});
				color: var(--db-current-color, #{$db-colors-primary-border-pressed});
    			
			}
        }
        
}

%db-primary-component-ia {
	background-color: $db-colors-primary-enabled;
	color: $db-colors-primary-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-primary-hover, #{$db-colors-primary-hover});
				background-color: var(--db-current-background-color, #{$db-colors-primary-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-primary-pressed, #{$db-colors-primary-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-primary-pressed});
    			
			}
        }
        
}

%db-primary-component {
	background-color: $db-colors-primary-enabled;
	color: $db-colors-primary-on-enabled;
}

%db-bg-primary-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-primary-bg-hover, #{$db-colors-primary-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-primary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-hover)};
			}
			
        }
        
}
%db-bg-primary-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-primary-bg-pressed, #{$db-colors-primary-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-primary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-pressed)};
			}
        }
        
}

%db-bg-primary {
    --db-current-background-color: var(--db-colors-primary-bg-enabled, #{$db-colors-primary-bg-enabled});
    --db-current-color: var(--db-colors-primary-on-bg-enabled, #{$db-colors-primary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-primary-element-enabled, #{$db-colors-primary-element-enabled});
    --db-current-border-color: var(--db-colors-primary-border-enabled, #{$db-colors-primary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-primary-border-weak-enabled, #{$db-colors-primary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-primary-bg-enabled});
    color: var(--db-current-color, #{$db-colors-primary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-primary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-primary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-primary;
		@extend %db-bg-primary-hover-state;
		@extend %db-bg-primary-active-state;
    }

    button {
		@extend %db-bg-primary-hover-state;
		@extend %db-bg-primary-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-on-bg-hover, #{$db-colors-primary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-on-bg-pressed, #{$db-colors-primary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-on-bg-weak-hover, #{$db-colors-primary-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-on-bg-weak-pressed, #{$db-colors-primary-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-primary-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-primary-bg-transparent-full-hover, #{$db-colors-primary-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-primary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-hover)};
			}
			
        }
        
}
%db-bg-primary-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-primary-bg-transparent-full-pressed, #{$db-colors-primary-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-primary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-pressed)};
			}
        }
        
}

%db-bg-primary-transparent-full {
    --db-current-background-color: var(--db-colors-primary-bg-transparent-full-enabled, #{$db-colors-primary-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-primary-on-bg-enabled, #{$db-colors-primary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-primary-element-enabled, #{$db-colors-primary-element-enabled});
    --db-current-border-color: var(--db-colors-primary-border-enabled, #{$db-colors-primary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-primary-border-weak-enabled, #{$db-colors-primary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-primary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-primary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-primary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-primary-transparent-full;
		@extend %db-bg-primary-transparent-full-hover-state;
		@extend %db-bg-primary-transparent-full-active-state;
    }

    button {
		@extend %db-bg-primary-transparent-full-hover-state;
		@extend %db-bg-primary-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-on-bg-hover, #{$db-colors-primary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-on-bg-pressed, #{$db-colors-primary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-on-bg-weak-hover, #{$db-colors-primary-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-on-bg-weak-pressed, #{$db-colors-primary-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-primary-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-primary-bg-transparent-semi-hover, #{$db-colors-primary-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-primary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-hover)};
			}
			
        }
        
}
%db-bg-primary-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-primary-bg-transparent-semi-pressed, #{$db-colors-primary-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-primary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-primary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-pressed)};
			}
        }
        
}

%db-bg-primary-transparent-semi {
    --db-current-background-color: var(--db-colors-primary-bg-transparent-semi-enabled, #{$db-colors-primary-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-primary-on-bg-enabled, #{$db-colors-primary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-primary-element-enabled, #{$db-colors-primary-element-enabled});
    --db-current-border-color: var(--db-colors-primary-border-enabled, #{$db-colors-primary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-primary-border-weak-enabled, #{$db-colors-primary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-primary-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-primary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-primary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-primary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-primary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-primary-transparent-semi;
		@extend %db-bg-primary-transparent-semi-hover-state;
		@extend %db-bg-primary-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-primary-transparent-semi-hover-state;
		@extend %db-bg-primary-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-primary-on-bg-hover, #{$db-colors-primary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-primary-on-bg-pressed, #{$db-colors-primary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-primary-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-hover, #{$db-colors-warning-hover});
				color: var(--db-current-color, #{$db-colors-warning-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-pressed, #{$db-colors-warning-pressed});
				color: var(--db-current-color, #{$db-colors-warning-pressed});
    			
			}
        }
        
}

%db-warning-element-ia {
	color: $db-colors-warning-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-element-hover, #{$db-colors-warning-element-hover});
				color: var(--db-current-color, #{$db-colors-warning-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-element-pressed, #{$db-colors-warning-element-pressed});
				color: var(--db-current-color, #{$db-colors-warning-element-pressed});
    			
			}
        }
        
}

%db-warning-border-ia {
	color: $db-colors-warning-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-border-hover, #{$db-colors-warning-border-hover});
				color: var(--db-current-color, #{$db-colors-warning-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-border-pressed, #{$db-colors-warning-border-pressed});
				color: var(--db-current-color, #{$db-colors-warning-border-pressed});
    			
			}
        }
        
}

%db-warning-component-ia {
	background-color: $db-colors-warning-enabled;
	color: $db-colors-warning-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-warning-hover, #{$db-colors-warning-hover});
				background-color: var(--db-current-background-color, #{$db-colors-warning-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-warning-pressed, #{$db-colors-warning-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-warning-pressed});
    			
			}
        }
        
}

%db-warning-component {
	background-color: $db-colors-warning-enabled;
	color: $db-colors-warning-on-enabled;
}

%db-bg-warning-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-warning-bg-hover, #{$db-colors-warning-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-hover)};
	--db-current-background-color-green: #{color.green($db-colors-warning-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-hover)};
			}
			
        }
        
}
%db-bg-warning-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-warning-bg-pressed, #{$db-colors-warning-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-warning-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-pressed)};
			}
        }
        
}

%db-bg-warning {
    --db-current-background-color: var(--db-colors-warning-bg-enabled, #{$db-colors-warning-bg-enabled});
    --db-current-color: var(--db-colors-warning-on-bg-enabled, #{$db-colors-warning-on-bg-enabled});
    --db-current-element-color: var(--db-colors-warning-element-enabled, #{$db-colors-warning-element-enabled});
    --db-current-border-color: var(--db-colors-warning-border-enabled, #{$db-colors-warning-border-enabled});
    --db-current-border-weak-color: var(--db-colors-warning-border-weak-enabled, #{$db-colors-warning-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-warning-bg-enabled});
    color: var(--db-current-color, #{$db-colors-warning-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-warning-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-warning-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-warning;
		@extend %db-bg-warning-hover-state;
		@extend %db-bg-warning-active-state;
    }

    button {
		@extend %db-bg-warning-hover-state;
		@extend %db-bg-warning-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-on-bg-hover, #{$db-colors-warning-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-on-bg-pressed, #{$db-colors-warning-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-on-bg-weak-hover, #{$db-colors-warning-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-on-bg-weak-pressed, #{$db-colors-warning-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-warning-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-warning-bg-transparent-full-hover, #{$db-colors-warning-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-hover)};
	--db-current-background-color-green: #{color.green($db-colors-warning-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-hover)};
			}
			
        }
        
}
%db-bg-warning-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-warning-bg-transparent-full-pressed, #{$db-colors-warning-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-warning-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-pressed)};
			}
        }
        
}

%db-bg-warning-transparent-full {
    --db-current-background-color: var(--db-colors-warning-bg-transparent-full-enabled, #{$db-colors-warning-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-warning-on-bg-enabled, #{$db-colors-warning-on-bg-enabled});
    --db-current-element-color: var(--db-colors-warning-element-enabled, #{$db-colors-warning-element-enabled});
    --db-current-border-color: var(--db-colors-warning-border-enabled, #{$db-colors-warning-border-enabled});
    --db-current-border-weak-color: var(--db-colors-warning-border-weak-enabled, #{$db-colors-warning-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-warning-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-warning-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-warning-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-warning-transparent-full;
		@extend %db-bg-warning-transparent-full-hover-state;
		@extend %db-bg-warning-transparent-full-active-state;
    }

    button {
		@extend %db-bg-warning-transparent-full-hover-state;
		@extend %db-bg-warning-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-on-bg-hover, #{$db-colors-warning-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-on-bg-pressed, #{$db-colors-warning-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-on-bg-weak-hover, #{$db-colors-warning-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-on-bg-weak-pressed, #{$db-colors-warning-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-warning-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-warning-bg-transparent-semi-hover, #{$db-colors-warning-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-hover)};
	--db-current-background-color-green: #{color.green($db-colors-warning-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-hover)};
			}
			
        }
        
}
%db-bg-warning-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-warning-bg-transparent-semi-pressed, #{$db-colors-warning-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-warning-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-warning-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-pressed)};
			}
        }
        
}

%db-bg-warning-transparent-semi {
    --db-current-background-color: var(--db-colors-warning-bg-transparent-semi-enabled, #{$db-colors-warning-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-warning-on-bg-enabled, #{$db-colors-warning-on-bg-enabled});
    --db-current-element-color: var(--db-colors-warning-element-enabled, #{$db-colors-warning-element-enabled});
    --db-current-border-color: var(--db-colors-warning-border-enabled, #{$db-colors-warning-border-enabled});
    --db-current-border-weak-color: var(--db-colors-warning-border-weak-enabled, #{$db-colors-warning-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-warning-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-warning-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-warning-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-warning-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-warning-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-warning-transparent-semi;
		@extend %db-bg-warning-transparent-semi-hover-state;
		@extend %db-bg-warning-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-warning-transparent-semi-hover-state;
		@extend %db-bg-warning-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-warning-on-bg-hover, #{$db-colors-warning-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-warning-on-bg-pressed, #{$db-colors-warning-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-warning-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-hover, #{$db-colors-successful-hover});
				color: var(--db-current-color, #{$db-colors-successful-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-pressed, #{$db-colors-successful-pressed});
				color: var(--db-current-color, #{$db-colors-successful-pressed});
    			
			}
        }
        
}

%db-successful-element-ia {
	color: $db-colors-successful-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-element-hover, #{$db-colors-successful-element-hover});
				color: var(--db-current-color, #{$db-colors-successful-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-element-pressed, #{$db-colors-successful-element-pressed});
				color: var(--db-current-color, #{$db-colors-successful-element-pressed});
    			
			}
        }
        
}

%db-successful-border-ia {
	color: $db-colors-successful-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-border-hover, #{$db-colors-successful-border-hover});
				color: var(--db-current-color, #{$db-colors-successful-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-border-pressed, #{$db-colors-successful-border-pressed});
				color: var(--db-current-color, #{$db-colors-successful-border-pressed});
    			
			}
        }
        
}

%db-successful-component-ia {
	background-color: $db-colors-successful-enabled;
	color: $db-colors-successful-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-successful-hover, #{$db-colors-successful-hover});
				background-color: var(--db-current-background-color, #{$db-colors-successful-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-successful-pressed, #{$db-colors-successful-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-successful-pressed});
    			
			}
        }
        
}

%db-successful-component {
	background-color: $db-colors-successful-enabled;
	color: $db-colors-successful-on-enabled;
}

%db-bg-successful-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-successful-bg-hover, #{$db-colors-successful-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-hover)};
	--db-current-background-color-green: #{color.green($db-colors-successful-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-hover)};
			}
			
        }
        
}
%db-bg-successful-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-successful-bg-pressed, #{$db-colors-successful-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-successful-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-pressed)};
			}
        }
        
}

%db-bg-successful {
    --db-current-background-color: var(--db-colors-successful-bg-enabled, #{$db-colors-successful-bg-enabled});
    --db-current-color: var(--db-colors-successful-on-bg-enabled, #{$db-colors-successful-on-bg-enabled});
    --db-current-element-color: var(--db-colors-successful-element-enabled, #{$db-colors-successful-element-enabled});
    --db-current-border-color: var(--db-colors-successful-border-enabled, #{$db-colors-successful-border-enabled});
    --db-current-border-weak-color: var(--db-colors-successful-border-weak-enabled, #{$db-colors-successful-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-successful-bg-enabled});
    color: var(--db-current-color, #{$db-colors-successful-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-successful-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-successful-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-successful;
		@extend %db-bg-successful-hover-state;
		@extend %db-bg-successful-active-state;
    }

    button {
		@extend %db-bg-successful-hover-state;
		@extend %db-bg-successful-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-on-bg-hover, #{$db-colors-successful-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-on-bg-pressed, #{$db-colors-successful-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-on-bg-weak-hover, #{$db-colors-successful-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-on-bg-weak-pressed, #{$db-colors-successful-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-successful-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-successful-bg-transparent-full-hover, #{$db-colors-successful-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-hover)};
	--db-current-background-color-green: #{color.green($db-colors-successful-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-hover)};
			}
			
        }
        
}
%db-bg-successful-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-successful-bg-transparent-full-pressed, #{$db-colors-successful-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-successful-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-pressed)};
			}
        }
        
}

%db-bg-successful-transparent-full {
    --db-current-background-color: var(--db-colors-successful-bg-transparent-full-enabled, #{$db-colors-successful-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-successful-on-bg-enabled, #{$db-colors-successful-on-bg-enabled});
    --db-current-element-color: var(--db-colors-successful-element-enabled, #{$db-colors-successful-element-enabled});
    --db-current-border-color: var(--db-colors-successful-border-enabled, #{$db-colors-successful-border-enabled});
    --db-current-border-weak-color: var(--db-colors-successful-border-weak-enabled, #{$db-colors-successful-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-successful-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-successful-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-successful-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-successful-transparent-full;
		@extend %db-bg-successful-transparent-full-hover-state;
		@extend %db-bg-successful-transparent-full-active-state;
    }

    button {
		@extend %db-bg-successful-transparent-full-hover-state;
		@extend %db-bg-successful-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-on-bg-hover, #{$db-colors-successful-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-on-bg-pressed, #{$db-colors-successful-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-on-bg-weak-hover, #{$db-colors-successful-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-on-bg-weak-pressed, #{$db-colors-successful-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-successful-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-successful-bg-transparent-semi-hover, #{$db-colors-successful-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-hover)};
	--db-current-background-color-green: #{color.green($db-colors-successful-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-hover)};
			}
			
        }
        
}
%db-bg-successful-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-successful-bg-transparent-semi-pressed, #{$db-colors-successful-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-successful-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-successful-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-pressed)};
			}
        }
        
}

%db-bg-successful-transparent-semi {
    --db-current-background-color: var(--db-colors-successful-bg-transparent-semi-enabled, #{$db-colors-successful-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-successful-on-bg-enabled, #{$db-colors-successful-on-bg-enabled});
    --db-current-element-color: var(--db-colors-successful-element-enabled, #{$db-colors-successful-element-enabled});
    --db-current-border-color: var(--db-colors-successful-border-enabled, #{$db-colors-successful-border-enabled});
    --db-current-border-weak-color: var(--db-colors-successful-border-weak-enabled, #{$db-colors-successful-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-successful-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-successful-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-successful-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-successful-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-successful-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-successful-transparent-semi;
		@extend %db-bg-successful-transparent-semi-hover-state;
		@extend %db-bg-successful-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-successful-transparent-semi-hover-state;
		@extend %db-bg-successful-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-successful-on-bg-hover, #{$db-colors-successful-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-successful-on-bg-pressed, #{$db-colors-successful-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-successful-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-hover, #{$db-colors-secondary-hover});
				color: var(--db-current-color, #{$db-colors-secondary-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-pressed, #{$db-colors-secondary-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-pressed});
    			
			}
        }
        
}

%db-secondary-element-ia {
	color: $db-colors-secondary-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-element-hover, #{$db-colors-secondary-element-hover});
				color: var(--db-current-color, #{$db-colors-secondary-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-element-pressed, #{$db-colors-secondary-element-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-element-pressed});
    			
			}
        }
        
}

%db-secondary-border-ia {
	color: $db-colors-secondary-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-border-hover, #{$db-colors-secondary-border-hover});
				color: var(--db-current-color, #{$db-colors-secondary-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-border-pressed, #{$db-colors-secondary-border-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-border-pressed});
    			
			}
        }
        
}

%db-secondary-component-ia {
	background-color: $db-colors-secondary-enabled;
	color: $db-colors-secondary-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-secondary-hover, #{$db-colors-secondary-hover});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-secondary-pressed, #{$db-colors-secondary-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-pressed});
    			
			}
        }
        
}

%db-secondary-component {
	background-color: $db-colors-secondary-enabled;
	color: $db-colors-secondary-on-enabled;
}

%db-bg-secondary-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-secondary-bg-hover, #{$db-colors-secondary-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-hover)};
			}
			
        }
        
}
%db-bg-secondary-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-secondary-bg-pressed, #{$db-colors-secondary-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-pressed)};
			}
        }
        
}

%db-bg-secondary {
    --db-current-background-color: var(--db-colors-secondary-bg-enabled, #{$db-colors-secondary-bg-enabled});
    --db-current-color: var(--db-colors-secondary-on-bg-enabled, #{$db-colors-secondary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-secondary-element-enabled, #{$db-colors-secondary-element-enabled});
    --db-current-border-color: var(--db-colors-secondary-border-enabled, #{$db-colors-secondary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-secondary-border-weak-enabled, #{$db-colors-secondary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-enabled});
    color: var(--db-current-color, #{$db-colors-secondary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-secondary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-secondary;
		@extend %db-bg-secondary-hover-state;
		@extend %db-bg-secondary-active-state;
    }

    button {
		@extend %db-bg-secondary-hover-state;
		@extend %db-bg-secondary-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-on-bg-hover, #{$db-colors-secondary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-on-bg-pressed, #{$db-colors-secondary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-on-bg-weak-hover, #{$db-colors-secondary-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-on-bg-weak-pressed, #{$db-colors-secondary-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-secondary-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-secondary-bg-transparent-full-hover, #{$db-colors-secondary-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-hover)};
			}
			
        }
        
}
%db-bg-secondary-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-secondary-bg-transparent-full-pressed, #{$db-colors-secondary-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-pressed)};
			}
        }
        
}

%db-bg-secondary-transparent-full {
    --db-current-background-color: var(--db-colors-secondary-bg-transparent-full-enabled, #{$db-colors-secondary-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-secondary-on-bg-enabled, #{$db-colors-secondary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-secondary-element-enabled, #{$db-colors-secondary-element-enabled});
    --db-current-border-color: var(--db-colors-secondary-border-enabled, #{$db-colors-secondary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-secondary-border-weak-enabled, #{$db-colors-secondary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-secondary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-secondary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-secondary-transparent-full;
		@extend %db-bg-secondary-transparent-full-hover-state;
		@extend %db-bg-secondary-transparent-full-active-state;
    }

    button {
		@extend %db-bg-secondary-transparent-full-hover-state;
		@extend %db-bg-secondary-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-on-bg-hover, #{$db-colors-secondary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-on-bg-pressed, #{$db-colors-secondary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-on-bg-weak-hover, #{$db-colors-secondary-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-on-bg-weak-pressed, #{$db-colors-secondary-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-secondary-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-secondary-bg-transparent-semi-hover, #{$db-colors-secondary-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-hover)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-hover)};
			}
			
        }
        
}
%db-bg-secondary-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-secondary-bg-transparent-semi-pressed, #{$db-colors-secondary-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-secondary-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-pressed)};
			}
        }
        
}

%db-bg-secondary-transparent-semi {
    --db-current-background-color: var(--db-colors-secondary-bg-transparent-semi-enabled, #{$db-colors-secondary-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-secondary-on-bg-enabled, #{$db-colors-secondary-on-bg-enabled});
    --db-current-element-color: var(--db-colors-secondary-element-enabled, #{$db-colors-secondary-element-enabled});
    --db-current-border-color: var(--db-colors-secondary-border-enabled, #{$db-colors-secondary-border-enabled});
    --db-current-border-weak-color: var(--db-colors-secondary-border-weak-enabled, #{$db-colors-secondary-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-secondary-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-secondary-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-secondary-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-secondary-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-secondary-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-secondary-transparent-semi;
		@extend %db-bg-secondary-transparent-semi-hover-state;
		@extend %db-bg-secondary-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-secondary-transparent-semi-hover-state;
		@extend %db-bg-secondary-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-secondary-on-bg-hover, #{$db-colors-secondary-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-secondary-on-bg-pressed, #{$db-colors-secondary-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-secondary-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-hover, #{$db-colors-neutral-hover});
				color: var(--db-current-color, #{$db-colors-neutral-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-pressed, #{$db-colors-neutral-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-pressed});
    			
			}
        }
        
}

%db-neutral-element-ia {
	color: $db-colors-neutral-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-element-hover, #{$db-colors-neutral-element-hover});
				color: var(--db-current-color, #{$db-colors-neutral-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-element-pressed, #{$db-colors-neutral-element-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-element-pressed});
    			
			}
        }
        
}

%db-neutral-border-ia {
	color: $db-colors-neutral-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-border-hover, #{$db-colors-neutral-border-hover});
				color: var(--db-current-color, #{$db-colors-neutral-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-border-pressed, #{$db-colors-neutral-border-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-border-pressed});
    			
			}
        }
        
}

%db-neutral-component-ia {
	background-color: $db-colors-neutral-enabled;
	color: $db-colors-neutral-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-hover, #{$db-colors-neutral-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-pressed, #{$db-colors-neutral-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-pressed});
    			
			}
        }
        
}

%db-neutral-component {
	background-color: $db-colors-neutral-enabled;
	color: $db-colors-neutral-on-enabled;
}

%db-bg-neutral-0-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-0-hover, #{$db-colors-neutral-bg-0-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-0-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-0-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-0-pressed, #{$db-colors-neutral-bg-0-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-0-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-0 {
    --db-current-background-color: var(--db-colors-neutral-bg-0-enabled, #{$db-colors-neutral-bg-0-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-0-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-0;
		@extend %db-bg-neutral-0-hover-state;
		@extend %db-bg-neutral-0-active-state;
    }

    button {
		@extend %db-bg-neutral-0-hover-state;
		@extend %db-bg-neutral-0-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-1-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-1-hover, #{$db-colors-neutral-bg-1-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-1-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-1-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-1-pressed, #{$db-colors-neutral-bg-1-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-1-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-1 {
    --db-current-background-color: var(--db-colors-neutral-bg-1-enabled, #{$db-colors-neutral-bg-1-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-1-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-1;
		@extend %db-bg-neutral-1-hover-state;
		@extend %db-bg-neutral-1-active-state;
    }

    button {
		@extend %db-bg-neutral-1-hover-state;
		@extend %db-bg-neutral-1-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-2-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-2-hover, #{$db-colors-neutral-bg-2-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-2-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-2-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-2-pressed, #{$db-colors-neutral-bg-2-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-2-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-2 {
    --db-current-background-color: var(--db-colors-neutral-bg-2-enabled, #{$db-colors-neutral-bg-2-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-2-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-2;
		@extend %db-bg-neutral-2-hover-state;
		@extend %db-bg-neutral-2-active-state;
    }

    button {
		@extend %db-bg-neutral-2-hover-state;
		@extend %db-bg-neutral-2-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-3-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-3-hover, #{$db-colors-neutral-bg-3-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-3-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-3-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-3-pressed, #{$db-colors-neutral-bg-3-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-3-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-3 {
    --db-current-background-color: var(--db-colors-neutral-bg-3-enabled, #{$db-colors-neutral-bg-3-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-3-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-3;
		@extend %db-bg-neutral-3-hover-state;
		@extend %db-bg-neutral-3-active-state;
    }

    button {
		@extend %db-bg-neutral-3-hover-state;
		@extend %db-bg-neutral-3-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-4-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-4-hover, #{$db-colors-neutral-bg-4-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-4-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-4-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-4-pressed, #{$db-colors-neutral-bg-4-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-4-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-4 {
    --db-current-background-color: var(--db-colors-neutral-bg-4-enabled, #{$db-colors-neutral-bg-4-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-4-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-4;
		@extend %db-bg-neutral-4-hover-state;
		@extend %db-bg-neutral-4-active-state;
    }

    button {
		@extend %db-bg-neutral-4-hover-state;
		@extend %db-bg-neutral-4-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-transparent-full-hover, #{$db-colors-neutral-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-transparent-full-pressed, #{$db-colors-neutral-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-transparent-full {
    --db-current-background-color: var(--db-colors-neutral-bg-transparent-full-enabled, #{$db-colors-neutral-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-transparent-full;
		@extend %db-bg-neutral-transparent-full-hover-state;
		@extend %db-bg-neutral-transparent-full-active-state;
    }

    button {
		@extend %db-bg-neutral-transparent-full-hover-state;
		@extend %db-bg-neutral-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-hover, #{$db-colors-neutral-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-weak-pressed, #{$db-colors-neutral-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-neutral-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-neutral-bg-transparent-semi-hover, #{$db-colors-neutral-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-hover)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-hover)};
			}
			
        }
        
}
%db-bg-neutral-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-neutral-bg-transparent-semi-pressed, #{$db-colors-neutral-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-neutral-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-pressed)};
			}
        }
        
}

%db-bg-neutral-transparent-semi {
    --db-current-background-color: var(--db-colors-neutral-bg-transparent-semi-enabled, #{$db-colors-neutral-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-neutral-on-bg-enabled, #{$db-colors-neutral-on-bg-enabled});
    --db-current-element-color: var(--db-colors-neutral-element-enabled, #{$db-colors-neutral-element-enabled});
    --db-current-border-color: var(--db-colors-neutral-border-enabled, #{$db-colors-neutral-border-enabled});
    --db-current-border-weak-color: var(--db-colors-neutral-border-weak-enabled, #{$db-colors-neutral-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-neutral-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-neutral-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-neutral-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-neutral-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-neutral-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-neutral-transparent-semi;
		@extend %db-bg-neutral-transparent-semi-hover-state;
		@extend %db-bg-neutral-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-neutral-transparent-semi-hover-state;
		@extend %db-bg-neutral-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-neutral-on-bg-hover, #{$db-colors-neutral-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-neutral-on-bg-pressed, #{$db-colors-neutral-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-neutral-on-bg-pressed});
    			
			}
        }
        
    }

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

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

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-hover, #{$db-colors-critical-hover});
				color: var(--db-current-color, #{$db-colors-critical-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-pressed, #{$db-colors-critical-pressed});
				color: var(--db-current-color, #{$db-colors-critical-pressed});
    			
			}
        }
        
}

%db-critical-element-ia {
	color: $db-colors-critical-element-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-element-hover, #{$db-colors-critical-element-hover});
				color: var(--db-current-color, #{$db-colors-critical-element-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-element-pressed, #{$db-colors-critical-element-pressed});
				color: var(--db-current-color, #{$db-colors-critical-element-pressed});
    			
			}
        }
        
}

%db-critical-border-ia {
	color: $db-colors-critical-border-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-border-hover, #{$db-colors-critical-border-hover});
				color: var(--db-current-color, #{$db-colors-critical-border-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-border-pressed, #{$db-colors-critical-border-pressed});
				color: var(--db-current-color, #{$db-colors-critical-border-pressed});
    			
			}
        }
        
}

%db-critical-component-ia {
	background-color: $db-colors-critical-enabled;
	color: $db-colors-critical-on-enabled;

		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-critical-hover, #{$db-colors-critical-hover});
				background-color: var(--db-current-background-color, #{$db-colors-critical-hover});
    			
			}
			
			&:active {
    			--db-current-background-color: var(--db-colors-critical-pressed, #{$db-colors-critical-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-critical-pressed});
    			
			}
        }
        
}

%db-critical-component {
	background-color: $db-colors-critical-enabled;
	color: $db-colors-critical-on-enabled;
}

%db-bg-critical-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-critical-bg-hover, #{$db-colors-critical-bg-hover});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-hover)};
	--db-current-background-color-green: #{color.green($db-colors-critical-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-hover)};
			}
			
        }
        
}
%db-bg-critical-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-critical-bg-pressed, #{$db-colors-critical-bg-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-critical-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-pressed)};
			}
        }
        
}

%db-bg-critical {
    --db-current-background-color: var(--db-colors-critical-bg-enabled, #{$db-colors-critical-bg-enabled});
    --db-current-color: var(--db-colors-critical-on-bg-enabled, #{$db-colors-critical-on-bg-enabled});
    --db-current-element-color: var(--db-colors-critical-element-enabled, #{$db-colors-critical-element-enabled});
    --db-current-border-color: var(--db-colors-critical-border-enabled, #{$db-colors-critical-border-enabled});
    --db-current-border-weak-color: var(--db-colors-critical-border-weak-enabled, #{$db-colors-critical-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-critical-bg-enabled});
    color: var(--db-current-color, #{$db-colors-critical-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-critical-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-critical-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-critical;
		@extend %db-bg-critical-hover-state;
		@extend %db-bg-critical-active-state;
    }

    button {
		@extend %db-bg-critical-hover-state;
		@extend %db-bg-critical-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-on-bg-hover, #{$db-colors-critical-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-on-bg-pressed, #{$db-colors-critical-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-on-bg-weak-hover, #{$db-colors-critical-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-on-bg-weak-pressed, #{$db-colors-critical-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-critical-transparent-full-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-critical-bg-transparent-full-hover, #{$db-colors-critical-bg-transparent-full-hover});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-full-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-hover)};
	--db-current-background-color-green: #{color.green($db-colors-critical-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-hover)};
			}
			
        }
        
}
%db-bg-critical-transparent-full-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-critical-bg-transparent-full-pressed, #{$db-colors-critical-bg-transparent-full-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-full-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-critical-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-pressed)};
			}
        }
        
}

%db-bg-critical-transparent-full {
    --db-current-background-color: var(--db-colors-critical-bg-transparent-full-enabled, #{$db-colors-critical-bg-transparent-full-enabled});
    --db-current-color: var(--db-colors-critical-on-bg-enabled, #{$db-colors-critical-on-bg-enabled});
    --db-current-element-color: var(--db-colors-critical-element-enabled, #{$db-colors-critical-element-enabled});
    --db-current-border-color: var(--db-colors-critical-border-enabled, #{$db-colors-critical-border-enabled});
    --db-current-border-weak-color: var(--db-colors-critical-border-weak-enabled, #{$db-colors-critical-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-full-enabled});
    color: var(--db-current-color, #{$db-colors-critical-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-critical-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-critical-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-critical-transparent-full;
		@extend %db-bg-critical-transparent-full-hover-state;
		@extend %db-bg-critical-transparent-full-active-state;
    }

    button {
		@extend %db-bg-critical-transparent-full-hover-state;
		@extend %db-bg-critical-transparent-full-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-on-bg-hover, #{$db-colors-critical-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-on-bg-pressed, #{$db-colors-critical-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-pressed});
    			
			}
        }
        
    }

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

		a {
		   
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-on-bg-weak-hover, #{$db-colors-critical-on-bg-weak-hover});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-weak-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-on-bg-weak-pressed, #{$db-colors-critical-on-bg-weak-pressed});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-weak-pressed});
    			
			}
        }
        
		}
    }
}
	
%db-bg-critical-transparent-semi-hover-state {
	
		&:enabled {
			
			&:hover {
    			--db-current-background-color: var(--db-colors-critical-bg-transparent-semi-hover, #{$db-colors-critical-bg-transparent-semi-hover});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-semi-hover});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-hover)};
	--db-current-background-color-green: #{color.green($db-colors-critical-hover)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-hover)};
			}
			
        }
        
}
%db-bg-critical-transparent-semi-active-state {
	
		&:enabled {
			
			
			&:active {
    			--db-current-background-color: var(--db-colors-critical-bg-transparent-semi-pressed, #{$db-colors-critical-bg-transparent-semi-pressed});
				background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-semi-pressed});
    			
	--db-current-background-color-red: #{color.red($db-colors-critical-pressed)};
	--db-current-background-color-green: #{color.green($db-colors-critical-pressed)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-pressed)};
			}
        }
        
}

%db-bg-critical-transparent-semi {
    --db-current-background-color: var(--db-colors-critical-bg-transparent-semi-enabled, #{$db-colors-critical-bg-transparent-semi-enabled});
    --db-current-color: var(--db-colors-critical-on-bg-enabled, #{$db-colors-critical-on-bg-enabled});
    --db-current-element-color: var(--db-colors-critical-element-enabled, #{$db-colors-critical-element-enabled});
    --db-current-border-color: var(--db-colors-critical-border-enabled, #{$db-colors-critical-border-enabled});
    --db-current-border-weak-color: var(--db-colors-critical-border-weak-enabled, #{$db-colors-critical-border-weak-enabled});
    background-color: var(--db-current-background-color, #{$db-colors-critical-bg-transparent-semi-enabled});
    color: var(--db-current-color, #{$db-colors-critical-on-bg-enabled});
    
	--db-current-background-color-red: #{color.red($db-colors-critical-enabled)};
	--db-current-background-color-green: #{color.green($db-colors-critical-enabled)};
	--db-current-background-color-blue: #{color.blue($db-colors-critical-enabled)};
    

    &-ia, &[data-variant="interactive"] {
		@extend %db-bg-critical-transparent-semi;
		@extend %db-bg-critical-transparent-semi-hover-state;
		@extend %db-bg-critical-transparent-semi-active-state;
    }

    button {
		@extend %db-bg-critical-transparent-semi-hover-state;
		@extend %db-bg-critical-transparent-semi-active-state;
    }

    a {
       
		&:enabled {
			
			&:hover {
    			--db-current-color: var(--db-colors-critical-on-bg-hover, #{$db-colors-critical-on-bg-hover});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-hover});
    			
			}
			
			&:active {
    			--db-current-color: var(--db-colors-critical-on-bg-pressed, #{$db-colors-critical-on-bg-pressed});
				color: var(--db-current-color, #{$db-colors-critical-on-bg-pressed});
    			
			}
        }
        
    }

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

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