diff --git a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
index 9d8fdcd588..cf0df8f972 100644
--- a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
+++ b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
@@ -11,6 +11,13 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Nicht ausgewählt" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Ausgewählt" _tooltipAlign="right" _value={true} />
+			<KolInputCheckbox
+				{...props}
+				_checked
+				_icons={{ unchecked: 'codicon codicon-close' }}
+				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_value={true}
+			/>
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx
index fa9ce97d4d..95e46b2285 100644
--- a/packages/samples/react/src/components/input-number/partials/cases.tsx
+++ b/packages/samples/react/src/components/input-number/partials/cases.tsx
@@ -24,6 +24,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 					},
 				}}
 			/>
+			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
 			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />
diff --git a/packages/samples/react/src/components/input-password/show-password.tsx b/packages/samples/react/src/components/input-password/show-password.tsx
index 3d82d062e1..fe8500a982 100644
--- a/packages/samples/react/src/components/input-password/show-password.tsx
+++ b/packages/samples/react/src/components/input-password/show-password.tsx
@@ -44,6 +44,25 @@ export const InputPasswordShowPassword: FC = () => {
 					}}
 					className="block"
 				/>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+					_disabled
+				/>
 			</KolForm>
 		</>
 	);
diff --git a/packages/samples/react/src/components/input-text/partials/cases.tsx b/packages/samples/react/src/components/input-text/partials/cases.tsx
index 1d319dff20..d4e6dda310 100644
--- a/packages/samples/react/src/components/input-text/partials/cases.tsx
+++ b/packages/samples/react/src/components/input-text/partials/cases.tsx
@@ -11,7 +11,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test überschrift' }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -37,6 +37,8 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'success', _description: 'Erfolgsmeldung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Mit Counter" _hasCounter _maxLength={10} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
diff --git a/packages/samples/react/src/components/textarea/partials/cases.tsx b/packages/samples/react/src/components/textarea/partials/cases.tsx
index 91a61eb7bd..fdbb1d2510 100644
--- a/packages/samples/react/src/components/textarea/partials/cases.tsx
+++ b/packages/samples/react/src/components/textarea/partials/cases.tsx
@@ -10,6 +10,9 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 		<div className="grid gap-4">
 			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
+			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);
 });
diff --git a/packages/themes/bmf/src/components/alert.scss b/packages/themes/bmf/src/components/alert.scss
index 5a36f1812f..88d503f632 100644
--- a/packages/themes/bmf/src/components/alert.scss
+++ b/packages/themes/bmf/src/components/alert.scss
@@ -227,6 +227,7 @@
 		}
 
 		> .content {
+			color: var(--color-black);
 			padding: 1rem;
 			max-height: 9.5rem;
 			overflow-y: auto;
diff --git a/packages/themes/bmf/src/components/input-checkbox.scss b/packages/themes/bmf/src/components/input-checkbox.scss
index 8272ea739d..3d80b9c758 100644
--- a/packages/themes/bmf/src/components/input-checkbox.scss
+++ b/packages/themes/bmf/src/components/input-checkbox.scss
@@ -1,3 +1,5 @@
+@import '../mixins/input-messages.scss';
+
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
@@ -10,60 +12,52 @@
 		justify-items: left;
 		width: 100%;
 		min-height: 44px;
-	}
-
-	:host .kol-input.default:not(.hide-label) {
-		grid-template-columns: 1.5rem auto;
-		gap: 0.4em;
-	}
 
-	:host .kol-input.switch:not(.hide-label) {
-		grid-template-columns: 3.5rem auto;
-		gap: 0.4em;
-	}
-
-	:host .kol-input > div.input {
-		display: inherit;
-		min-height: 44px;
-		order: 2;
-	}
+		&:not(.disabled) :is(.input, label) {
+			cursor: pointer;
+		}
 
-	:host .kol-input > div.input input {
-		margin: 0px;
-	}
+		&.disabled .input {
+			cursor: not-allowed;
+		}
 
-	:host .kol-input:not(.disabled) :is(.input, label) {
-		cursor: pointer;
-	}
+		&.default:not(.hide-label) {
+			grid-template-columns: 1.5rem auto;
+			gap: 0.4em;
+		}
 
-	:host .kol-input.disabled .input {
-		cursor: not-allowed;
-	}
+		&.switch:not(.hide-label) {
+			grid-template-columns: 3.5rem auto;
+			gap: 0.4em;
+		}
 
-	:host .kol-input > label {
-		order: 3;
-	}
+		> div.input {
+			display: inherit;
+			min-height: 44px;
+			order: 2;
+			height: 100%;
 
-	:host .kol-input > .kol-alert-wc.error {
-		order: 1;
-		padding-top: 0.25em;
-		grid-column: span 2 / auto;
-	}
+			input {
+				margin: 0px;
+			}
+		}
 
-	:host .kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
+		> label {
+			order: 3;
+			height: 100%;
+			padding-top: 0.75rem;
+			color: var(--color-black);
+		}
 
-	:host .kol-input.error input:focus,
-	.kol-input.error select:focus,
-	.kol-input.error textarea:focus {
-		outline-color: var(--color-red) !important;
-	}
+		> .kol-alert-wc {
+			order: 1;
+			padding-top: 0.25em;
+			grid-column: span 2 / auto;
+		}
 
-	:host .kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
+		&.error input:focus {
+			outline-color: var(--color-red) !important;
+		}
 	}
 
 	:host input {
@@ -75,24 +69,21 @@
 		border-radius: 5px;
 		line-height: 24px;
 		font-size: 1rem;
+
+		&:focus {
+			border-color: var(--color-midnight);
+		}
+		&:hover {
+			box-shadow: none;
+		}
+		&:active {
+			box-shadow: none;
+		}
 	}
 
+	:host kol-icon:hover ~ input,
 	:host input:hover {
 		border-color: var(--color-midnight);
-		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
-	}
-
-	:host input:focus:hover {
-		box-shadow: none;
-	}
-
-	:host input:active {
-		box-shadow: none;
-	}
-
-	:host .kol-alert-wc {
-		display: block;
-		width: 100%;
 	}
 
 	/* CHECKBOX */
@@ -105,41 +96,40 @@
 		padding-left: 0.125em;
 	}
 
-	:host .kol-input input[type='checkbox'] {
-		appearance: none;
-		background-color: white;
-		transition: 0.5s;
-	}
-
-	:host .kol-input input[type='checkbox']:before {
-		content: '';
-	}
-
-	:host .kol-input input[type='checkbox']:checked {
-		background-color: var(--color-midnight);
-		border-color: var(--color-midnight);
-	}
-
-	:host .kol-input.default .checkbox-container {
-		justify-content: flex-start;
-	}
-
-	:host .kol-input.default input[type='checkbox']:indeterminate {
-		background-color: var(--color-midnight);
-		border-color: var(--color-midnight);
-	}
-
-	:host .kol-input.default .icon {
-		color: var(--color-white);
-		margin: -0.125rem 0 0 0.25rem;
-		/* visually align */
-	}
+	:host .kol-input {
+		input[type='checkbox'] {
+			appearance: none;
+			background-color: white;
+			transition: 0.5s;
 
-	:host .kol-input.default input[type='checkbox'] {
-		border-radius: var(--border-radius);
-		height: calc(6 * var(--spacing));
-		min-width: calc(6 * var(--spacing));
-		width: calc(6 * var(--spacing));
+			&:before {
+				content: '';
+			}
+			&:checked {
+				background-color: var(--color-midnight);
+				border-color: var(--color-midnight);
+			}
+		}
+		&.default {
+			.checkbox-container {
+				justify-content: flex-start;
+			}
+			input[type='checkbox'] {
+				border-radius: var(--border-radius);
+				height: calc(6 * var(--spacing));
+				min-width: calc(6 * var(--spacing));
+				width: calc(6 * var(--spacing));
+				&:indeterminate {
+					background-color: var(--color-midnight);
+					border-color: var(--color-midnight);
+				}
+			}
+			.icon {
+				color: var(--color-white);
+				margin: -0.125rem 0 0 0.25rem;
+				/* visually align */
+			}
+		}
 	}
 
 	.default {
@@ -158,47 +148,45 @@
 		}
 	}
 
-	:host .kol-input.switch input[type='checkbox'] {
-		min-width: 3.5em;
-		width: 3.5em;
-		background-color: var(--color-grey);
-		border-width: 0;
-		height: 1.5em;
-		border-radius: 1.25em;
-		position: relative;
-		/* Visible with forced colors  */
-		outline: transparent solid 1px;
-	}
-
-	:host .kol-input.switch input[type='checkbox']:before {
-		transition: 0.5;
-		width: 1.25em;
-		height: 1.25em;
-		left: calc(0.25em - 2px);
-		top: calc(0.25em - 2px);
-		border-radius: 1.25em;
-		background-color: white;
-		position: absolute;
-	}
-
-	:host .kol-input.switch input[type='checkbox']:checked {
-		background-color: var(--color-midnight);
-	}
-
-	:host .kol-input.switch input[type='checkbox']:checked:before {
-		transform: translateX(2em);
-		--tw-bg-opacity: 1;
-	}
-
-	:host .kol-input.switch input[type='checkbox']:indeterminate {
-		--tw-bg-opacity: 1;
-	}
+	/* SWITCH */
+	:host .kol-input.switch {
+		input[type='checkbox'] {
+			min-width: 3.5em;
+			width: 3.5em;
+			background-color: var(--color-grey);
+			border-width: 0;
+			height: 1.5em;
+			border-radius: 1.25em;
+			position: relative;
+			/* Visible with forced colors  */
+			outline: transparent solid 1px;
+
+			&:before {
+				transition: 0.5;
+				width: 1.25em;
+				height: 1.25em;
+				left: calc(0.25em - 2px);
+				top: calc(0.25em - 2px);
+				border-radius: 1.25em;
+				background-color: white;
+				position: absolute;
+			}
+			&:checked {
+				background-color: var(--color-midnight);
 
-	:host .kol-input.switch input[type='checkbox']:indeterminate:before {
-		transform: translateX(1em);
-	}
+				&:before {
+					transform: translateX(2em);
+					--tw-bg-opacity: 1;
+				}
+			}
+			&:indeterminate {
+				--tw-bg-opacity: 1;
 
-	.switch {
+				&:before {
+					transform: translateX(1em);
+				}
+			}
+		}
 		& .checkbox-input-element {
 			display: block;
 		}
@@ -236,6 +224,7 @@
 		}
 	}
 
+	/* BUTTON BADGE */
 	.kol-input.button {
 		row-gap: 0.5rem;
 
@@ -276,6 +265,7 @@
 			display: flex;
 			min-height: 44px;
 			width: 100%;
+			padding-top: 0;
 		}
 
 		/* Inner, visual, element for the label */
@@ -325,351 +315,5 @@
 		}
 	}
 
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
-
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
-
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-	}
-
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include inputMessages;
 }
diff --git a/packages/themes/bmf/src/components/input-color.scss b/packages/themes/bmf/src/components/input-color.scss
index 39ccf7c128..05259f4652 100644
--- a/packages/themes/bmf/src/components/input-color.scss
+++ b/packages/themes/bmf/src/components/input-color.scss
@@ -1,458 +1,32 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input[type='color'] {
-		border: none;
 		min-height: 40px !important;
-	}
-
-	input[type='color'] {
 		background-color: transparent;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:not([type='color']):read-only,
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
 
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.msg.success .close .icon {
-		color: var(--color-green);
+		&:not([type='color']):read-only,
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-date.scss b/packages/themes/bmf/src/components/input-date.scss
index c0b8fab748..e69086c039 100644
--- a/packages/themes/bmf/src/components/input-date.scss
+++ b/packages/themes/bmf/src/components/input-date.scss
@@ -1,448 +1,33 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
 
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
+		&::-webkit-datetime-edit {
+			color: var(--color-grey);
+		}
 
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-email.scss b/packages/themes/bmf/src/components/input-email.scss
index c0b8fab748..027cef1e60 100644
--- a/packages/themes/bmf/src/components/input-email.scss
+++ b/packages/themes/bmf/src/components/input-email.scss
@@ -1,448 +1,29 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
 
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.card.warning .close {
-		background-color: var(--color-orange);
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-file.scss b/packages/themes/bmf/src/components/input-file.scss
index 4160f07bb7..82c24563a9 100644
--- a/packages/themes/bmf/src/components/input-file.scss
+++ b/packages/themes/bmf/src/components/input-file.scss
@@ -1,456 +1,31 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
-
-	.kol-input .input input[type='file'] {
-		padding-top: calc(0.5em + 2px);
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input[type='file'] {
-		background-color: transparent;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
 		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
+		padding-top: calc(0.5em + 2px);
 
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-number.scss b/packages/themes/bmf/src/components/input-number.scss
index c0b8fab748..027cef1e60 100644
--- a/packages/themes/bmf/src/components/input-number.scss
+++ b/packages/themes/bmf/src/components/input-number.scss
@@ -1,448 +1,29 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
 
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.card.warning .close {
-		background-color: var(--color-orange);
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-password.scss b/packages/themes/bmf/src/components/input-password.scss
index c0b8fab748..b032b1f61f 100644
--- a/packages/themes/bmf/src/components/input-password.scss
+++ b/packages/themes/bmf/src/components/input-password.scss
@@ -1,448 +1,36 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
 
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button {
-		padding: 8px;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+	kol-button-wc {
+		margin-right: -0.875em;
 	}
-
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
+	.kol-input.disabled .kol-button-wc {
+		display: none;
 	}
 
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-radio.scss b/packages/themes/bmf/src/components/input-radio.scss
index 5ad7ea9982..c24c99a137 100644
--- a/packages/themes/bmf/src/components/input-radio.scss
+++ b/packages/themes/bmf/src/components/input-radio.scss
@@ -1,12 +1,22 @@
+@import '../mixins/input-messages.scss';
+
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
 
-	/* INPUT */
 	.kol-input {
 		display: grid;
-		gap: 0.4em;
+
+		&.disabled {
+			.input {
+				opacity: 0.5;
+			}
+			input,
+			label {
+				opacity: 1;
+			}
+		}
 	}
 
 	label {
@@ -27,24 +37,14 @@
 		/* padding: 10px 14px; */
 		line-height: 24px;
 		font-size: 16px;
-	}
-
-	input:hover {
-		border-color: var(--color-midnight);
-		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
-	}
-
-	input:focus:hover {
-		box-shadow: none;
-	}
 
-	input:hover {
-		border-color: var(--color-midnight);
-	}
+		&:hover {
+			border-color: var(--color-midnight);
+		}
 
-	.kol-alert-wc {
-		display: block;
-		width: 100%;
+		&:focus:hover {
+			box-shadow: none;
+		}
 	}
 
 	.required legend > span::after {
@@ -52,13 +52,68 @@
 		padding-left: 0.125em;
 	}
 
-	/* RADIO */
 	fieldset {
 		border: 0px;
 		margin: 0px;
 		padding: 0px;
-		display: grid;
 		gap: 0.25em;
+		color: var(--color-black);
+		display: grid;
+
+		&.horizontal {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25rem 1.5rem;
+
+			legend span {
+				width: 100%;
+			}
+		}
+
+		.kol-alert-wc {
+			order: 1;
+			padding-bottom: 0.25em;
+		}
+
+		legend {
+			order: 2;
+			display: contents;
+			padding-bottom: 0.25em;
+
+			* {
+				order: 2;
+			}
+		}
+
+		.kol-input {
+			order: 3;
+		}
+
+		.input-slot {
+			gap: 0.5rem;
+		}
+
+		&.error {
+			border-left: 3px solid var(--color-red);
+			padding-left: 1em;
+
+			input:focus,
+			select:focus,
+			textarea:focus {
+				outline-color: var(--color-red) !important;
+			}
+
+			.kol-alert-wc.error {
+				margin-left: -0.25em;
+				color: var(--color-red);
+				font-weight: 700;
+			}
+
+			label,
+			legend {
+				color: initial;
+			}
+		}
 	}
 
 	.radio-input-wrapper {
@@ -70,441 +125,45 @@
 		min-height: 44px;
 		margin: 0;
 		gap: 0.5rem;
-	}
-
-	.radio-input-wrapper label {
-		cursor: pointer;
-		display: flex;
-		padding-left: 0.25em;
-		width: 100%;
-	}
-
-	.radio-input-wrapper label span {
-		margin-top: 0.125em;
-	}
-
-	.radio-input-wrapper input[type='radio'] {
-		appearance: none;
-		transition: 0.5s;
-		border-radius: 100%;
-		height: calc(6 * var(--spacing));
-		min-width: calc(6 * var(--spacing));
-		width: calc(6 * var(--spacing));
-	}
-
-	.radio-input-wrapper input[type='radio']:before {
-		content: '';
-		cursor: pointer;
-		border-radius: 100%;
-		display: block;
-	}
-
-	.radio-input-wrapper input[type='radio']:checked:before {
-		background-color: var(--color-midnight);
-	}
-
-	.radio-input-wrapper input[type='radio']:disabled {
-		cursor: not-allowed;
-		border-color: var(--border-default);
-		background-color: var(--background-light-grey);
-	}
-
-	.kol-alert-wc.error {
-		order: 1;
-	}
-
-	fieldset legend {
-		order: 2;
-		display: contents;
-	}
-
-	fieldset .kol-input {
-		order: 3;
-	}
-
-	fieldset.error {
-		border-left: 3px solid var(--color-red);
-		color: var(--color-red);
-		font-weight: 700;
-		padding-left: 1em;
-	}
-
-	fieldset.error input:focus,
-	fieldset.error select:focus,
-	fieldset.error textarea:focus {
-		outline-color: var(--color-red) !important;
-	}
-
-	fieldset.error .kol-alert-wc.error {
-		margin-left: -0.25em;
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	fieldset.horizontal {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem 1rem;
-	}
-
-	fieldset.horizontal legend {
-		display: inline-block;
-		margin-bottom: 0.25em;
-	}
-
-	fieldset .input-slot {
-		gap: 0.5rem;
-	}
-
-	.radio-input-wrapper label {
-		padding-left: 0;
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
 
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
-
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
-
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-	}
-
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+		label {
+			cursor: pointer;
+			display: flex;
+			padding-left: 0;
+			width: 100%;
+
+			span {
+				margin-top: 0.125em;
+			}
+		}
+
+		input[type='radio'] {
+			appearance: none;
+			transition: 0.5s;
+			border-radius: 100%;
+			height: calc(6 * var(--spacing));
+			min-width: calc(6 * var(--spacing));
+			width: calc(6 * var(--spacing));
+
+			&:before {
+				content: '';
+				cursor: pointer;
+				border-radius: 100%;
+				display: block;
+			}
+			&:checked {
+				border-color: var(--color-midnight);
+
+				&:before {
+					background-color: var(--color-midnight);
+				}
+			}
+		}
+
+		:is(input[type='radio']:disabled, .radio-label) {
+			cursor: not-allowed;
+		}
+	}
+
+	@include inputMessages;
 }
diff --git a/packages/themes/bmf/src/components/input-range.scss b/packages/themes/bmf/src/components/input-range.scss
index 1dacce64a0..250c8d692e 100644
--- a/packages/themes/bmf/src/components/input-range.scss
+++ b/packages/themes/bmf/src/components/input-range.scss
@@ -1,95 +1,31 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	.inputs-wrapper {
 		gap: 1em;
 	}
 
-	input::placeholder {
-		color: var(--color-grey);
+	input {
+		&:disabled {
+			cursor: not-allowed;
+		}
+
+		&::placeholder {
+			color: var(--color-grey);
+		}
 	}
 
 	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
 		padding: 0 1em;
-	}
 
-	.input > .kol-icon {
-		width: 1em;
-	}
+		&.icon-left > .kol-icon:first-child {
+			margin-right: 0.5em;
+		}
 
-	.input.icon-left > .kol-icon:first-child {
-		margin-right: 0.5em;
+		&.icon-right > .kol-icon:last-child {
+			margin-left: 0.5em;
+		}
 	}
 
-	.input.icon-right > .kol-icon:last-child {
-		margin-left: 0.5em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/input-text.scss b/packages/themes/bmf/src/components/input-text.scss
index c0b8fab748..f160a79d07 100644
--- a/packages/themes/bmf/src/components/input-text.scss
+++ b/packages/themes/bmf/src/components/input-text.scss
@@ -1,448 +1,31 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	input {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
-
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
-	}
-
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
 
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	.card.warning .close {
-		background-color: var(--color-orange);
+		&[disabled],
+		&[disabled]:focus {
+			cursor: not-allowed;
+			opacity: 1 !important;
+		}
 	}
 
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/pagination.scss b/packages/themes/bmf/src/components/pagination.scss
index 0e8a3b2cb5..dc5d07af25 100644
--- a/packages/themes/bmf/src/components/pagination.scss
+++ b/packages/themes/bmf/src/components/pagination.scss
@@ -57,9 +57,9 @@
 		}
 
 		.button-inner {
-			background-color: var(--color-white);
+			background-color: transparent;
 			border-radius: var(--a11y-min-size);
-			border: 2px solid var(--color-white);
+			border: 2px solid transparent;
 			color: var(--color-midnight);
 			min-height: var(--a11y-min-size);
 			min-width: var(--a11y-min-size);
diff --git a/packages/themes/bmf/src/components/progress.scss b/packages/themes/bmf/src/components/progress.scss
index 4672408587..484b1e4f1b 100644
--- a/packages/themes/bmf/src/components/progress.scss
+++ b/packages/themes/bmf/src/components/progress.scss
@@ -22,6 +22,7 @@
 		fill: var(--color-ice);
 		stroke: var(--color-ice);
 		stroke-width: 1px;
+		height: 0.5rem;
 	}
 
 	.bar .progress {
diff --git a/packages/themes/bmf/src/components/select.scss b/packages/themes/bmf/src/components/select.scss
index e50854ff50..5629ccbd42 100644
--- a/packages/themes/bmf/src/components/select.scss
+++ b/packages/themes/bmf/src/components/select.scss
@@ -1,477 +1,63 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-	}
-
-	.kol-input .error {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	select {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
 
-	.input.icon-left .kol-icon:first-child {
-		margin-right: 0.5em;
-	}
-
-	.input.icon-right .kol-icon:last-child {
-		margin-left: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
+		&::placeholder {
+			color: var(--color-grey);
+		}
 
-	select:disabled {
-		cursor: not-allowed;
-	}
+		&:disabled {
+			cursor: not-allowed;
+		}
 
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
+		&[multiple] {
+			overflow: auto;
+		}
 
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
+		option {
+			margin: 1px 0;
+			border-radius: 0.25em;
+			cursor: pointer;
 
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-smoke);
-		border-color: var(--color-granite);
-		color: var(--color-black);
-	}
-
-	select[multiple] {
-		overflow: auto;
-	}
-
-	select option {
-		margin: 1px 0;
-		border-radius: 0.25em;
-		cursor: pointer;
-	}
-
-	select:not([multiple]) option {
-		padding: 0.5em;
-	}
+			&:disabled {
+				cursor: not-allowed;
+			}
 
-	select option:disabled {
-		cursor: not-allowed;
-	}
-
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
+			&:active:not(:disabled),
+			&:checked:not(:disabled),
+			&:focus:not(:disabled),
+			&:hover:not(:disabled) {
+				background: var(--color-ocean);
+				color: white;
+			}
+		}
 
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
+		&:not([multiple]) option {
+			padding: 0.5em;
+		}
 	}
 
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
+	.input {
+		padding: 0 1em;
 
-	.close > button {
-		padding: 8px;
-	}
+		&.icon-left .kol-icon:first-child {
+			margin-right: 0.5em;
+		}
 
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
+		&.icon-right .kol-icon:last-child {
+			margin-left: 0.5em;
+		}
 
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-	}
+		> input:first-child {
+			padding-left: 0.375em;
+		}
 
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
+		> input:last-child {
+			padding-right: 0.375em;
+		}
 	}
 
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/components/textarea.scss b/packages/themes/bmf/src/components/textarea.scss
index b64e5d7f08..d208e6091c 100644
--- a/packages/themes/bmf/src/components/textarea.scss
+++ b/packages/themes/bmf/src/components/textarea.scss
@@ -1,475 +1,34 @@
-@layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		gap: 0.25em;
-		display: grid;
-		grid-template-areas: 'error error' 'label counter' 'input input' 'hint hint';
-		grid-template-columns: 1fr 115px;
-	}
-
-	.kol-input .error {
-		order: 1;
-		grid-area: error;
-	}
-
-	.kol-input label {
-		order: 2;
-		grid-area: label;
-	}
-
-	.kol-input .counter {
-		order: 2;
-		grid-area: counter;
-		justify-self: end;
-	}
-
-	.kol-input .input {
-		order: 3;
-		grid-area: input;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		font-size: 0.875em;
-		font-style: italic;
-		grid-area: hint;
-	}
+@import '../mixins/input.scss';
 
+@layer kol-theme-component {
 	textarea {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-grey);
-	}
-
-	.input {
-		background-color: var(--color-white);
-		border-color: var(--color-grey);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		padding: 0 0.5em;
-	}
-
-	.input > .kol-icon {
-		width: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.input > input:first-child {
-		padding-left: 0.375em;
-	}
-
-	.input > input:last-child {
-		padding-right: 0.375em;
-	}
-
-	.input:hover {
-		border-color: var(--color-midnight);
-	}
-
-	textarea:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error .input {
-		border-color: var(--color-red);
-		border-width: 3px;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		border-left: 3px solid var(--color-red);
-		padding-left: 1em;
-	}
-
-	.kol-input.error .kol-alert-wc.error {
-		color: var(--color-red);
-		font-weight: 700;
-	}
-
-	select[multiple],
-	textarea {
+		display: block;
+		padding-top: 12px;
+		padding-bottom: 12px;
 		overflow: auto;
-	}
 
-	textarea {
-		display: block;
+		&::placeholder {
+			color: var(--color-grey);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			opacity: 1;
+		}
 	}
 
 	.input {
+		padding: 0 0 0 1em;
 		position: relative;
-	}
-
-	.input textarea ~ span {
-		position: absolute;
-		top: -1.5rem;
-		right: 0;
-		color: var(--color-grey);
-	}
-
-	.msg {
-		border-width: 0 !important;
-	}
-
-	.kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 5px;
-		display: flex;
-		width: 100%;
-		overflow: unset;
-		border-color: transparent;
-		background-color: white;
-	}
-
-	.kol-alert-wc > .heading {
-		display: flex;
-		gap: 0.5em;
-		place-items: center;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--kolibri-spacing);
-	}
-
-	.msg {
-		background-color: transparent;
-	}
-
-	.msg > .heading {
-		place-items: flex-start;
-	}
-
-	.msg > .heading > .kol-icon {
-		place-self: baseline;
-	}
-
-	.kol-alert-wc > .heading > div {
-		display: grid;
-		gap: var(--spacing);
-	}
-
-	.kol-alert-wc > .heading > .kol-button-wc.close {
-		place-self: center;
-	}
-
-	.msg {
-		align-items: start;
-	}
-
-	.default {
-		border-color: var(--color-grey);
-	}
-
-	.default.msg .heading-icon {
-		color: var(--color-grey);
-	}
-
-	.error {
-		border-color: var(--color-red);
-	}
-
-	.error.msg .heading-icon {
-		color: var(--color-red);
-	}
-
-	.info {
-		border-color: var(--color-midnight);
-	}
-
-	.info.msg .heading-icon {
-		color: var(--color-midnight);
-	}
-
-	.success {
-		border-color: var(--color-green);
-	}
-
-	.success.msg .heading-icon {
-		color: var(--color-green);
-	}
-
-	.warning {
-		border-color: var(--color-orange);
-	}
-
-	.warning.msg .heading-icon {
-		color: var(--color-orange);
-	}
-
-	.heading-icon {
-		color: white;
-	}
 
-	.kol-alert-wc .heading .heading-icon {
-		padding: 0;
+		textarea ~ span {
+			position: absolute;
+			top: -1.5rem;
+			right: 0;
+			color: var(--color-grey);
+		}
 	}
 
-	.msg > .heading > .heading-icon {
-		padding-top: 0;
-		place-items: baseline;
-	}
-
-	.msg > .heading > .heading-icon::part(icon) {
-		line-height: 1.375rem;
-	}
-
-	.msg > .heading > div > .kol-heading-wc {
-		line-height: 20px;
-		padding-top: 0.125rem;
-	}
-
-	.msg.default .heading > div > .kol-heading-wc {
-		color: var(--color-grey);
-	}
-
-	.msg.error .heading > div > .kol-heading-wc {
-		color: var(--color-red);
-	}
-
-	.msg.info .heading > div > .kol-heading-wc {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .heading > div > .kol-heading-wc {
-		color: var(--color-green);
-	}
-
-	.msg.warning .heading > div > .kol-heading-wc {
-		color: var(--color-orange);
-	}
-
-	/*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
-	.msg.default .close .icon {
-		color: var(--color-grey);
-	}
-
-	.msg.error .close .icon {
-		color: var(--color-red);
-	}
-
-	.msg.info .close .icon {
-		color: var(--color-midnight);
-	}
-
-	.msg.success .close .icon {
-		color: var(--color-green);
-	}
-
-	.msg.warning .close .icon {
-		color: var(--color-orange);
-	}
-
-	.card {
-		border-width: 2px;
-		border-style: solid;
-		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
-		flex-direction: column;
-	}
-
-	.card > .heading {
-		padding: 0.5rem 1rem;
-	}
-
-	.card.hasCloser > .heading {
-		padding-top: 0;
-		padding-bottom: 0;
-		padding-right: 0;
-	}
-
-	.card > .heading > div {
-		width: 100%;
-		min-height: 1.25rem;
-	}
-
-	.card > .heading .heading-icon {
-		justify-self: right;
-		margin-top: -4px;
-	}
-
-	.card > .heading .kol-heading-wc {
-		width: 100%;
-		color: white;
-		display: flex;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-	}
-
-	.card > .heading .kol-heading-wc > * {
-		margin: auto 0;
-	}
-
-	.card > .heading .kol-button-wc button:focus {
-		outline-color: var(--color-white);
-		outline-offset: -3px;
-		outline-style: solid;
-		outline-width: 3px;
-		transition: outline 0.1s linear;
-	}
-
-	.card > .heading .kol-button-wc button:hover {
-		background-color: rgba(32, 32, 32, 0.2);
-	}
-
-	.card > .heading .kol-button-wc button:active {
-		background-color: rgba(32, 32, 32, 0.4);
-	}
-
-	.card > .heading .kol-button-wc button:hover:focus {
-		background-color: rgba(32, 32, 32, 0.1);
-	}
-
-	.card > .content {
-		padding: 1rem;
-		max-height: 9.5rem;
-		overflow-y: auto;
-	}
-
-	.card.default > .heading {
-		background-color: var(--color-grey);
-		border-bottom: 2px solid var(--color-grey);
-	}
-
-	.card.error > .heading {
-		background-color: var(--color-red);
-		border-bottom: 2px solid var(--color-red);
-	}
-
-	.card.info > .heading {
-		background-color: var(--color-midnight);
-		border-bottom: 2px solid var(--color-midnight);
-	}
-
-	.card.success > .heading {
-		background-color: var(--color-green);
-		border-bottom: 2px solid var(--color-green);
-	}
-
-	.card.warning > .heading {
-		background-color: var(--color-orange);
-		border-bottom: 2px solid var(--color-orange);
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-		font-variation-settings: 'FILL' 1;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	:is(.error, .info, .success, .warning) .heading-icon {
-		font-size: 1.25rem !important;
-	}
-
-	.error .heading-icon::part(icon)::before {
-		content: 'error';
-	}
-
-	.info .heading-icon::part(icon)::before {
-		content: 'info';
-	}
-
-	.success .heading-icon::part(icon)::before {
-		content: 'check_circle';
-	}
-
-	.warning .heading-icon::part(icon)::before {
-		content: 'warning';
-	}
-
-	.card > div > .content {
-		grid-row: 2;
-		grid-column: 1 / span 2;
-	}
-
-	.card.default .close {
-		background-color: var(--color-grey);
-	}
-
-	.card.error .close {
-		background-color: var(--color-red);
-	}
-
-	.card.info .close {
-		background-color: var(--color-midnight);
-	}
-
-	.card.success .close {
-		background-color: var(--color-green);
-	}
-
-	.card.warning .close {
-		background-color: var(--color-orange);
-	}
-
-	.close > button {
-		min-width: 44px;
-		color: var(--color-white);
-		min-height: 44px;
-		display: grid;
-		gap: 0.25em;
-		line-height: 1.5rem;
-		font-family: var(--font-family);
-		font-weight: 700;
-		cursor: pointer;
-		border-radius: 1.5em;
-		border-style: solid;
-		border-width: 2px;
-		font-size: 1rem;
-		align-items: center;
-		padding: 8px 14px;
-		justify-content: center;
-		font-style: normal;
-		text-align: center;
-		width: inherit;
-		transition-duration: 0.5s;
-		transition-property: background-color, color, border-color;
-		background-color: rgba(0, 0, 0, 0);
-		border-color: rgba(0, 0, 0, 0);
-	}
-
-	.close > button {
-		padding: 8px;
-	}
-
-	.close > button .kol-icon {
-		display: flex;
-		width: 1em;
-		height: 1em;
-		font-size: 1rem;
-	}
-
-	.close > button .kol-icon::part(icon) {
-		font-family: 'Material Symbols Rounded';
-		font-weight: 900;
-	}
-
-	.close > button .kol-icon::part(icon)::before {
-		content: 'close';
-	}
-
-	.close > button:active {
-		box-shadow: none;
-		outline: none;
-	}
+	@include input;
 }
diff --git a/packages/themes/bmf/src/global.scss b/packages/themes/bmf/src/global.scss
index ccc1ae3026..4874ef8516 100644
--- a/packages/themes/bmf/src/global.scss
+++ b/packages/themes/bmf/src/global.scss
@@ -104,7 +104,7 @@
 
 	.kol-tooltip-wc .tooltip-content {
 		border-radius: var(--border-radius);
-		line-height: 1.5em;
+		line-height: 1.25em;
 		padding: 0.5rem 0.75rem;
 	}
 
diff --git a/packages/themes/bmf/src/mixins/input-messages.scss b/packages/themes/bmf/src/mixins/input-messages.scss
new file mode 100644
index 0000000000..95b6c9984b
--- /dev/null
+++ b/packages/themes/bmf/src/mixins/input-messages.scss
@@ -0,0 +1,171 @@
+@mixin inputMessages {
+	.kol-input {
+		&.error,
+		&.msg-type-info,
+		&.msg-type-warning,
+		&.msg-type-success {
+			.input {
+				border-width: 3px;
+
+				&:hover {
+					border-color: var(--color-midnight);
+				}
+			}
+			&:not(.hidden-error) {
+				padding-left: 1em;
+			}
+		}
+
+		&.error {
+			.input {
+				border-color: var(--color-red);
+			}
+			&:not(.hidden-error) {
+				border-left: 3px solid var(--color-red);
+			}
+		}
+
+		&.msg-type-info {
+			.input {
+				border-color: var(--color-midnight);
+			}
+			&:not(.hidden-error) {
+				border-left: 3px solid var(--color-midnight);
+			}
+		}
+
+		&.msg-type-warning {
+			.input {
+				border-color: var(--color-orange);
+			}
+			&:not(.hidden-error) {
+				border-left: 3px solid var(--color-orange);
+			}
+		}
+
+		&.msg-type-success {
+			.input {
+				border-color: var(--color-green);
+			}
+			&:not(.hidden-error) {
+				border-left: 3px solid var(--color-green);
+			}
+		}
+	}
+	.msg {
+		border-width: 0;
+		background-color: transparent;
+		align-items: start;
+
+		> .heading {
+			place-items: flex-start;
+
+			> .kol-icon {
+				place-self: baseline;
+			}
+
+			.heading-icon {
+				padding-top: 0;
+				place-items: baseline;
+
+				&::part(icon) {
+					line-height: 1.375rem;
+				}
+			}
+
+			> div > .kol-heading-wc {
+				line-height: 20px;
+				padding-top: 0.125rem;
+			}
+		}
+
+		&.default {
+			.heading > div > .kol-heading-wc {
+				color: var(--color-grey);
+			}
+		}
+
+		&.error {
+			.heading > div > .kol-heading-wc {
+				color: var(--color-red);
+			}
+		}
+
+		&.info {
+			.heading > div > .kol-heading-wc {
+				color: var(--color-midnight);
+			}
+		}
+
+		&.success {
+			.heading > div > .kol-heading-wc {
+				color: var(--color-green);
+			}
+		}
+
+		&.warning {
+			.heading > div > .kol-heading-wc {
+				color: var(--color-orange);
+			}
+		}
+	}
+
+	.kol-alert-wc {
+		display: flex;
+		width: 100%;
+		overflow: unset;
+
+		> .heading {
+			display: flex;
+			gap: 0.5em;
+
+			> div {
+				display: grid;
+				gap: var(--spacing);
+				font-weight: 700;
+			}
+		}
+	}
+
+	.default {
+		border-color: var(--color-grey);
+
+		&.msg .heading-icon {
+			color: var(--color-grey);
+		}
+	}
+
+	@include setMsgType(error, red, error);
+	@include setMsgType(info, midnight, info);
+	@include setMsgType(success, green, check_circle);
+	@include setMsgType(warning, orange, warning);
+
+	.heading-icon {
+		color: white;
+		font-size: 1.25rem !important;
+
+		&::part(icon) {
+			font-family: 'Material Symbols Rounded';
+			font-weight: 900;
+			font-variation-settings: 'FILL' 1;
+			height: 1.25rem;
+			width: 1.25rem;
+		}
+	}
+}
+
+@mixin setMsgType($type, $color, $icon) {
+	.#{$type},
+	.msg-type-#{$type} {
+		border-color: var(--color-#{$color});
+		color: var(--color-#{$color});
+
+		&.msg .heading-icon {
+			color: var(--color-#{$color});
+		}
+
+		.heading-icon::part(icon)::before {
+			content: '#{$icon}';
+		}
+	}
+}
diff --git a/packages/themes/bmf/src/mixins/input.scss b/packages/themes/bmf/src/mixins/input.scss
new file mode 100644
index 0000000000..667e5d1d11
--- /dev/null
+++ b/packages/themes/bmf/src/mixins/input.scss
@@ -0,0 +1,87 @@
+@import './input-messages.scss';
+
+@mixin input {
+	:host {
+		font-family: var(--font-family);
+	}
+
+	.kol-input {
+		gap: 0.25em;
+		display: grid;
+		grid-template-areas: 'error error' 'label counter' 'input input' 'hint hint';
+		grid-template-columns: 1fr 115px;
+
+		.error {
+			order: 1;
+			grid-area: error;
+		}
+
+		label {
+			order: 2;
+			grid-area: label;
+			color: var(--color-black);
+		}
+
+		.counter {
+			order: 2;
+			grid-area: counter;
+			justify-self: end;
+		}
+
+		.input {
+			order: 3;
+			grid-area: input;
+		}
+
+		.hint {
+			order: 4;
+			font-size: 0.875em;
+			font-style: italic;
+			grid-area: hint;
+		}
+
+		&.disabled {
+			label {
+				opacity: 1;
+			}
+			.input {
+				background-color: var(--color-smoke);
+				border-color: var(--color-granite);
+				color: var(--color-black);
+			}
+		}
+	}
+
+	.input {
+		background-color: var(--color-white);
+		border-color: var(--color-grey);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: 2px;
+
+		> .kol-icon {
+			width: 1em;
+		}
+
+		&:is(.icon-left, .icon-right) {
+			padding-left: 0.875em;
+			padding-left: 0.875em;
+
+			input {
+				padding-left: 0.5em;
+				padding-right: 0.5em;
+			}
+		}
+
+		&:hover {
+			border-color: var(--color-midnight);
+		}
+	}
+
+	.required label > span::after {
+		content: '*';
+		padding-left: 0.125em;
+	}
+
+	@include inputMessages;
+}