@use "sass:map";
@use '../core/utilities/mixins';
@use '../core/utilities/maps';


*,
*:before,
*:after {
    // Verhindert, dass Padding/Border die Breite (z.B. w-full) vergrößern
    box-sizing: border-box;
}

html {
    @include mixins.normalize;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    // Verhindert Layout-Sprünge beim Einblenden von Scrollbalken
    scrollbar-gutter: stable;
}

body {
    background-color: var(--kern-color-layout-background-default);
}

// Bilder reagieren standardmäßig auf deine Grid-Spalten
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}


// Theme
[data-kern-theme="dark"],
.kern-dark,
[data-kern-theme="light"],
.kern-light {
    background-color: var(--kern-color-layout-background-default);
}

body:has(.kern-dialog[open]) {
    overflow: hidden;
}

*:not(i) {
    font-family: var(--kern-typography-font-family-default);
}

// All focusable elements
area[href],
iframe,
[tabindex],
[contentEditable="true"] {
    &:not([tabindex="-1"]) {
        &:focus {
            border-radius: var(--kern-metric-border-radius-default, 0.25rem);
            @include mixins.focus-offset;

            &:focus-visible {
                outline: 0;
            }
        }
    }
}


//kern-sr-only class
.kern-sr-only {
    @include mixins.kern-sr-only;

    &-mobile {
        display: inline; // Show by default

        @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) {
            @include mixins.kern-sr-only;
        }
    }
}

.kern-error {
    @include mixins.normalize;
    display: flex;
    gap: var(--kern-metric-space-small, 8px);
    align-items: flex-start;
    align-self: stretch;

    .kern-icon {
        background-color: var(--kern-color-feedback-danger-contextual, #BD0F09);
        margin: 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);
    }
}

.kern-number {
    display: flex;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 2px 0px;
    justify-content: center;
    align-items: center;
    border-radius: var(--kern-metric-border-radius-circle, 50%);
    border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-layout-text-default-contextual, #131525);
    color: var(--kern-color-layout-text-default-contextual, #131525);
}