/*
 * SPDX-License-Identifier: EUPL-1.2
 * Copyright (c) 2026 [Dataport AöR]
 */

/*
 * Minimal KERN Design System (@kern-ux/native) subset for Checkbox, Email/Text input, and StaticText/Body form elements.
 * Extracted from the compiled kern.min.css (v2.8.0, https://www.npmjs.com/package/@kern-ux/native).
 * Only kern-form-check(__checkbox), kern-form-input(__input), kern-label, kern-hint, kern-error, kern-body, and
 * kern-sr-only rules are included.
 */

@import '../Fonts/_fonts.css';

/* Minimal KERN token subset (extracted from @kern-ux/native compiled CSS) */
:root {
    --kern-0: 0;
    --kern-1: .0625rem;
    --kern-16: 1rem;
    --kern-2: .125rem;
    --kern-3: .1875rem;
    --kern-32: 2rem;
    --kern-4: .25rem;
    --kern-48: 3rem;
    --kern-56: 3.5rem;
    --kern-6: .375rem;
    --kern-7: .4375rem;
    --kern-8: .5rem;
    --kern-80: 5rem;
    --kern-font-size-16: 1rem;
    --kern-font-size-18: 1.125rem;
    --kern-font-size-21: 1.3125rem;
    --kern-font-size-24: 1.5rem;
    --kern-font-size-32: 2rem;
    --kern-metric-baseline-body-default-padding-bottom: var(--kern-2);
    --kern-metric-baseline-body-default-padding-top: var(--kern-6);
    --kern-metric-baseline-body-large-padding-bottom: var(--kern-7);
    --kern-metric-baseline-body-large-padding-top: var(--kern-1);
    --kern-metric-baseline-body-small-padding-bottom: var(--kern-1);
    --kern-metric-baseline-body-small-padding-top: var(--kern-7);
    --kern-metric-baseline-label-default-padding-bottom: var(--kern-2);
    --kern-metric-baseline-label-default-padding-top: var(--kern-6);
    --kern-metric-baseline-label-large-padding-bottom: var(--kern-7);
    --kern-metric-baseline-label-large-padding-top: var(--kern-1);
    --kern-metric-baseline-label-small-padding-bottom: var(--kern-1);
    --kern-metric-baseline-label-small-padding-top: var(--kern-7);
    --kern-metric-border-radius-none: var(--kern-0);
    --kern-metric-border-radius-small: var(--kern-2);
    --kern-metric-border-width-none: var(--kern-0);
    --kern-metric-border-width-bold: var(--kern-4);
    --kern-metric-border-width-default: var(--kern-2);
    --kern-metric-border-width-light: var(--kern-1);
    --kern-metric-dimension-2x-large: var(--kern-56);
    --kern-metric-dimension-2x-small: var(--kern-8);
    --kern-metric-dimension-4x-large: var(--kern-80);
    --kern-metric-dimension-large: var(--kern-32);
    --kern-metric-dimension-x-large: var(--kern-48);
    --kern-metric-dimension-x-small: var(--kern-16);
    --kern-metric-space-none: var(--kern-0);
    --kern-metric-space-2x-small: var(--kern-2);
    --kern-metric-space-x-small: var(--kern-4);
    --kern-metric-space-small: var(--kern-8);
    --kern-metric-space-default: var(--kern-16);
    --kern-color-layout-text-default-contextual: #003064;
    --kern-typography-font-family-default: "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --kern-typography-font-size-large-static: var(--kern-font-size-21);
    --kern-typography-font-size-medium-static: var(--kern-font-size-18);
    --kern-typography-font-size-small-static: var(--kern-font-size-16);
    --kern-typography-font-weight-body-default: var(--kern-typography-font-weight-regular);
    --kern-typography-font-weight-body-strong: var(--kern-typography-font-weight-medium);
    --kern-typography-font-weight-label-default: var(--kern-typography-font-weight-medium);
    --kern-typography-font-weight-label-subtle: var(--kern-typography-font-weight-regular);
    --kern-typography-font-weight-regular: 300;
    --kern-typography-font-weight-medium: 400;
    --kern-typography-font-weight-semi-bold: 500;
    --kern-typography-line-height-large-static: var(--kern-font-size-32);
    --kern-typography-line-height-medium-static: var(--kern-font-size-24);
    --kern-color-layout-background-default: #ffffff;
    --kern-color-layout-background-inverted: #000000;
}

/* Screen-reader-only utility */
.kern-sr-only {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.kern-sr-only:not(caption) {
    position: absolute !important;
}

/* Error message */
.kern-error {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    display: flex;
    gap: var(--kern-metric-space-small, 8px);
    align-items: flex-start;
    align-self: stretch;
}

/* Checkbox (kern-form-check / kern-form-check__checkbox) */
.kern-form-check {
    display: grid;
    grid-template-columns: var(--kern-metric-dimension-large, 32px) auto;
    align-items: start;
    padding-right: var(--kern-metric-space-default, 16px);
}

.kern-form-check__checkbox {
    width: var(--kern-metric-dimension-large, 32px);
    height: var(--kern-metric-dimension-large, 32px);
    border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034);
    background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
    margin: var(--kern-metric-space-none, 0px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.kern-form-check__checkbox:hover {
    border: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border-contextual, #1D2034);
}

.kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible {
    outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
    outline-offset: 0;
    border: var(--kern-metric-border-width-none, 0px);
    forced-color-adjust: none;
}

.kern-form-check__checkbox:focus:hover, .kern-form-check__checkbox:focus-visible:hover {
    border: var(--kern-metric-border-width-none, 0px);
}

.kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible {
    outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
    outline-offset: 0;
    border: var(--kern-metric-border-width-none, 0px);
    forced-color-adjust: none;
}

.kern-form-check__checkbox:checked:focus:hover, .kern-form-check__checkbox:checked:focus-visible:hover {
    border: var(--kern-metric-border-width-none, 0px);
}

.kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
    outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
    outline-offset: 0;
    outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
}

.kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
    outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
    outline-offset: 0;
    outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
}

.kern-form-check__checkbox[disabled], .kern-form-check__checkbox[aria-disabled=true] {
    outline: 0;
    opacity: var(--kern-color-action-state-opacity-disabled, .4);
}

.kern-form-check__checkbox[disabled]:checked, .kern-form-check__checkbox[aria-disabled=true]:checked {
    outline: var(--kern-metric-border-width-none, 0px);
}

.kern-form-check__checkbox[disabled]:hover, .kern-form-check__checkbox[aria-disabled=true]:hover {
    cursor: default;
}

.kern-form-check__checkbox[disabled] ~ .kern-label, .kern-form-check__checkbox[aria-disabled=true] ~ .kern-label {
    opacity: var(--kern-color-action-state-opacity-disabled, .4);
    cursor: default;
}

.kern-form-check .kern-label {
    font-weight: var(--kern-typography-font-weight-label-subtle, 400);
    padding-top: var(--kern-metric-space-x-small, 4px);
    padding-left: var(--kern-metric-space-default, 16px);
}

.kern-form-check .kern-label:has(.kern-label__optional) {
    display: flex;
    align-items: center;
    align-content: center;
    gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
    align-self: stretch;
    flex-wrap: wrap;
}

.kern-form-check .kern-label__optional {
    color: var(--kern-color-layout-text-muted-contextual, #404565);
    font-weight: var(--kern-typography-font-weight-label-subtle, 400);
}

.kern-form-check .kern-error {
    grid-column: span 2;
    padding-top: var(--kern-metric-space-small, 8px);
}

.kern-form-check--error {
    border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #C31C13);
    padding-left: var(--kern-metric-space-default, 16px);
}

.kern-form-check--error .kern-form-check__checkbox--error {
    border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
    outline-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
    background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
}

.kern-form-check__checkbox {
    border-radius: var(--kern-metric-border-radius-small, 2px);
}

.kern-form-check__checkbox:before {
    content: "";
}

.kern-form-check__checkbox:focus:before, .kern-form-check__checkbox:focus-visible:before {
    margin: var(--kern-6, 6px);
}

.kern-form-check__checkbox:checked:before {
    display: block;
    position: relative;
    left: var(--kern-3, 3px);
    top: var(--kern-8, 8px);
    transform: rotate(47deg) translate(-50%, -50%);
    background-color: transparent;
    border-width: var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-space-none, 0px);
    border-color: var(--kern-color-form-input-border-contextual, #1D2034);
    border-style: solid;
    height: var(--kern-metric-dimension-x-small, 16px);
    width: var(--kern-metric-dimension-2x-small, 8px);
    margin: 4px;
}

.kern-form-check__checkbox:checked:hover:before {
    margin: var(--kern-metric-space-2x-small, 2px);
}

.kern-form-check__checkbox:checked:focus:before, .kern-form-check__checkbox:checked:focus-visible:before {
    margin: var(--kern-6, 6px);
}

.kern-form-check__checkbox--error {
    border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
    outline-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important;
    background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
}

.kern-form-check__checkbox--error:checked:before {
    border-color: var(--kern-color-feedback-danger-contextual, #C31C13);
}

.kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
    box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #C31C13);
    outline: var(--kern-metric-border-width-none, 0px);
    border: var(--kern-metric-border-width-none, 0px);
}

.kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
    box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #C31C13);
    outline: var(--kern-metric-border-width-none, 0px);
    border: var(--kern-metric-border-width-none, 0px);
}

/* Text/Email input (kern-form-input) */
.kern-form-input {
    display: flex;
    padding: var(--kern-metric-space-none, 0px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kern-metric-space-none, 0px);
    align-self: stretch;
}

.kern-form-input:has(input[disabled],textarea[disabled],input[aria-disabled=true],textarea[aria-disabled=true]) {
    cursor: not-allowed;
}

.kern-form-input:has(input[disabled],textarea[disabled],input[aria-disabled=true],textarea[aria-disabled=true]) .kern-label {
    cursor: not-allowed;
}

.kern-form-input .kern-label {
    margin-bottom: var(--kern-metric-space-small, 8px);
}

.kern-form-input .kern-label:has(.kern-label__optional) {
    display: flex;
    align-items: center;
    align-content: center;
    gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
    align-self: stretch;
    flex-wrap: wrap;
}

.kern-form-input .kern-label__optional {
    color: var(--kern-color-layout-text-muted-contextual, #404565);
    font-weight: var(--kern-typography-font-weight-label-subtle, 400);
}

.kern-form-input:has(.kern-hint) .kern-label {
    margin-bottom: var(--kern-metric-space-none, 0px);
}

.kern-form-input .kern-hint {
    margin-bottom: var(--kern-metric-space-small, 8px);
}

.kern-form-input__input {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-medium-static, 18px);
    font-weight: var(--kern-typography-font-weight-body-default, 400);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
    height: var(--kern-metric-dimension-x-large, 48px);
    align-items: center;
    align-self: stretch;
    width: 100%;
    border-radius: var(--kern-metric-border-radius-small, 2px);
    border: none;
    border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #171A2B);
    background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
}

.kern-form-input__input:hover {
    border-width: var(--kern-metric-border-width-bold, 4px);
    padding-top: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px));
}

.kern-form-input__input:focus {
    border-radius: var(--kern-metric-border-radius-small, 2px);
    background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9);
    border: none;
    padding-bottom: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px));
    outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
    outline-offset: 0;
}

.kern-form-input__input:focus:hover {
    padding-top: var(--kern-metric-space-none, 0px);
}

.kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] {
    border-radius: var(--kern-metric-border-radius-none, 0px);
    border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border-contextual, #A5AAC3);
    background: inherit;
    cursor: not-allowed;
}

.kern-form-input__input[readonly]:hover, .kern-form-input__input[readonly=readonly]:hover {
    padding-top: var(--kern-metric-space-none, 0px);
}

.kern-form-input__input[readonly]:focus, .kern-form-input__input[readonly=readonly]:focus {
    border-radius: var(--kern-metric-border-radius-small, 2px);
    padding-top: var(--kern-metric-border-width-light, 1px);
    border-width: var(--kern-metric-border-width-none, 0);
}

.kern-form-input__input[disabled], .kern-form-input__input[disabled=disabled], .kern-form-input__input[aria-disabled=true] {
    opacity: var(--kern-color-action-state-opacity-disabled, .4);
    cursor: not-allowed;
}

.kern-form-input__input[disabled]:hover, .kern-form-input__input[disabled=disabled]:hover, .kern-form-input__input[aria-disabled=true]:hover {
    border-width: var(--kern-metric-border-width-default, 2px);
    padding-top: var(--kern-metric-space-none, 0px);
}

.kern-form-input__input--error {
    border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-feedback-danger-contextual, #BD0F09);
    background: var(--kern-color-feedback-danger-background-contextual, #FEECE8);
}

.kern-form-input__input--error:focus {
    outline-color: var(--kern-color-feedback-danger-contextual, #BD0F09);
    background: var(--kern-color-feedback-danger-background-contextual, #FEECE8);
    border: none;
}

.kern-form-input__input--width-2 {
    max-width: var(--kern-metric-dimension-2x-large);
}

.kern-form-input__input--width-4 {
    max-width: var(--kern-metric-dimension-4x-large);
}

.kern-form-input .kern-error {
    order: 5;
    margin-top: var(--kern-metric-space-small, 8px);
}

.kern-form-input--error {
    border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #BD0F09);
    padding-left: var(--kern-metric-space-default, 16px);
}

textarea.kern-form-input__input:hover {
    padding-top: var(--kern-metric-space-none, 0px);
}

/* Static text / body copy */
.kern-body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-medium-static, 18px);
    font-weight: var(--kern-typography-font-weight-body-default, 400);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
}

.kern-body--large {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-large-static, 21px);
    font-weight: var(--kern-typography-font-weight-body-default, 400);
    line-height: var(--kern-typography-line-height-large-static, 32px);
}

.kern-body--small {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-small-static, 16px);
    font-weight: var(--kern-typography-font-weight-body-default, 400);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
}

.kern-body--bold {
    font-weight: var(--kern-typography-font-weight-body-strong, 600);
}

.kern-body--muted {
    color: var(--kern-color-layout-text-muted, #404565);
}

/* Hint text */
.kern-hint {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-medium-static, 18px);
    font-weight: var(--kern-typography-font-weight-body-default, 400);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
}

/* Label */
.kern-label {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-label-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-medium-static, 18px);
    font-weight: var(--kern-typography-font-weight-label-default, 600);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
    width: fit-content;
}

.kern-label--large {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-label-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-large-static, 21px);
    font-weight: var(--kern-typography-font-weight-label-default, 600);
    line-height: var(--kern-typography-line-height-large-static, 32px);
}

.kern-label--small {
    color: var(--kern-color-layout-text-default-contextual, #131525);
    font-family: var(--kern-typography-font-family-default, "Fira Sans");
    font-style: normal;
    letter-spacing: var(--kern-metric-space-none, 0px);
    font-variant-numeric: tabular-nums slashed-zero;
    padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
    font-size: var(--kern-typography-font-size-small-static, 16px);
    font-weight: var(--kern-typography-font-weight-label-default, 600);
    line-height: var(--kern-typography-line-height-medium-static, 24px);
}

.kern-label--subtle {
    font-weight: var(--kern-typography-font-weight-label-subtle, 400);
}

/* Forced-colors / high-contrast mode */
@media (forced-colors: active) {
    .kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible {
        outline: auto !important;
        outline-offset: 4px !important;
        outline-width: 3px !important;
        outline-color: transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible {
        outline: auto !important;
        outline-offset: 4px !important;
        outline-width: 3px !important;
        outline-color: transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
        outline: auto !important;
        outline-offset: 4px !important;
        outline-width: 3px !important;
        outline-color: transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible {
        box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
        background-color: var(--kern-color-layout-background-default) !important;
    }
}

@media (forced-colors: active) {
    .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
        outline: auto !important;
        outline-offset: 4px !important;
        outline-width: 3px !important;
        outline-color: transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible {
        box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important;
        background-color: var(--kern-color-layout-background-default) !important;
    }
}

@media (forced-colors: active) {
    .kern-form-input__input {
        border: 1px solid transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] {
        border: 1px solid transparent !important;
    }
}

@media (forced-colors: active) {
    .kern-form-input__input--error {
        border: 1px solid transparent !important;
    }
}