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


@use "../utilities/mixins";

.kern-alert {
    border-radius: var(--kern-metric-border-radius-default, 4px);
    outline: var(--kern-metric-border-width-default, 2px) solid transparent;
    
    &--info {
        outline-color: var(--kern-color-feedback-info-contextual, #006B8C);
        background-color: var(--kern-color-feedback-info-background-contextual, #C0F3FF);
        .kern-icon--info {
            background-color: var(--kern-color-feedback-info-contextual, #006B8C);
            @include mixins.forced-colors-style;
        }  
        .kern-alert__body {
            outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info-contextual, #006B8C);
        }     
    }
    
    &--success {
        outline-color: var(--kern-color-feedback-success-contextual, #007155);
        background-color: var(--kern-color-feedback-success-background-contextual, #CDF2E4);
        .kern-icon--success {
            background-color: var(--kern-color-feedback-success-contextual, #007155);
            @include mixins.forced-colors-style;
        } 

        .kern-alert__body {
            outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-success-contextual, #007155);
        }
    }
    
    &--warning {
        outline-color: var(--kern-color-feedback-warning-contextual, #925400);
        background-color: var(--kern-color-feedback-warning-background-contextual, #FFE7B6);
        .kern-icon--warning {
            background-color: var(--kern-color-feedback-warning-contextual, #925400);
            @include mixins.forced-colors-style;
        } 
        .kern-alert__body {
            outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning-contextual, #925400);
        }
    }
    
    &--danger {
        outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
        background-color: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
        .kern-icon--danger {
            background-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            @include mixins.forced-colors-style;
        } 
        .kern-alert__body {
            outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-danger-contextual, #C31C13);
        }
    }
    
    &__header {
        display: flex;
        padding: var(--kern-metric-space-default, 16px);
        align-items: center;
        
        .kern-icon {
            @include mixins.icon-large;
        }
    }
    
    .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-contextual, #FFF);
        border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-default, 4px) var(--kern-metric-border-radius-default, 4px);
        display: flex;
        flex-direction: column;
        gap: var(--kern-metric-space-small, 8px);
    }
}