/**
 * @file _badge.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 08.04.2026
 * @@VERSION@@
 * @brief Styles für die Badge-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Badge-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (info, success, warning und danger)
 * Alle Variationen können mit und ohne Icon dargestellt werden.
 */

 @use "../utilities/mixins";

.kern-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-2x-small, 2px) var(--kern-component-badge-space-left, 12px);
    border-radius: var(--kern-metric-border-radius-default, 4px);
    min-height: var(--kern-metric-dimension-large, 32px);

    .kern-label {
        // @include mixins.label-default; 
        @include mixins.label-small;
        padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px);
    }

    .kern-icon {
        @include mixins.icon-default;
    }

    &--info {
        background: var(--kern-color-feedback-info-background-contextual, #C0F3FF);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info-contextual, #006B8C);

        .kern-icon {
            background-color: var(--kern-color-feedback-info-contextual, #006B8C);
            @include mixins.forced-colors-style;
        }
        
    }

    &--success {
        background: var(--kern-color-feedback-success-background-contextual, #DEF6ED);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-success-contextual, #007155);

        .kern-icon {
            background-color: var(--kern-color-feedback-success-contextual, #007155);
            @include mixins.forced-colors-style;
        }
    }

    &--warning {
        background: var(--kern-color-feedback-warning-background-contextual, #FFE7B6);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning-contextual, #925400);

        .kern-icon {
            background-color: var(--kern-color-feedback-warning-contextual, #925400);
            @include mixins.forced-colors-style;
        }
    }

    &--danger {
        background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-danger-contextual, #C31C13);

        .kern-icon {
            background-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            @include mixins.forced-colors-style;
        }
    }

    &--small {
        padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px);
        min-height: var(--kern-metric-dimension-default, 24px);
        border: none;

        &.kern-badge--info {
            box-shadow: inset 0 0 0 1px var(--kern-color-feedback-info-contextual, #006B8C);
        }

        &.kern-badge--success {
            box-shadow: inset 0 0 0 1px var(--kern-color-feedback-success-contextual, #007155 );
        }

        &.kern-badge--warning {
            box-shadow: inset 0 0 0 1px var(--kern-color-feedback-warning-contextual, #925400);
        }

        &.kern-badge--danger {
            box-shadow: inset 0 0 0 1px var(--kern-color-feedback-danger-contextual, #C31C13);
        }

        .kern-label {
            @include mixins.label-small;
            padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px);
        }

        .kern-icon {
            @include mixins.icon-small;
        }
    }

}