@use "../utilities/mixins";

/**
 * @file _alert.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 Alert-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Alert-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (info, success, warning und danger)
 * Alle Variationen können mit und ohne body text dargestellt werden.
 */

.kern-alert {
    border-radius: var(--kern-metric-border-radius-default, 4px);
    border: var(--kern-metric-border-width-default, 2px) solid transparent;


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

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

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

    &__header {
        display: flex;
        padding: var(--kern-metric-space-default, 16px);
        align-items: center;

        .kern-icon {
            width: var(--kern-component-alert-icon-size, 32px);
            min-width: var(--kern-component-alert-icon-size, 32px);
            height: var(--kern-component-alert-icon-size, 32px);
            min-height: var(--kern-component-alert-icon-size, 32px);
        }
    }

    .kern-title {
        padding-left: var(--kern-metric-space-small, 8px);
        padding-right: var(--kern-metric-space-small, 8px);
    }

    &__body {
        padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-large, 24px);
        background: var(--kern-color-layout-background-default, #FFF);
        display: flex;
        flex-direction: column;
        gap: var(--kern-metric-space-small, 8px);
    }
}