@use "../utilities/mixins";

/**
 * @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 30.07.2025
 * @@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.
 */

.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 {
        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 {
        width: var(--kern-metric-dimension-default, 24px);
        height: var(--kern-metric-dimension-default, 24px);
    }

    &--info {
        background: var(--kern-color-feedback-info-background, #E0F4FC);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info, #006490);

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

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

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

    &--warning {
        background: var(--kern-color-feedback-warning-background, #FFEFD0);
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning, #8A4F00);

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

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

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

}