/**
* @file _summary.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 09.04.2026
* @@VERSION@@
* @brief Styles für die Summary Komponente.‚
*
* Diese Datei enthält die CSS-Regeln, um die Summary Komponente
* visuell darzustellen. Sie definiert das Grundaussehen.
*/

@use "../utilities/mixins";

.kern-summary-group {
    &__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        padding: var(--kern-metric-baseline-heading-medium-padding-top, 8px) var(--kern-metric-space-none, 0px) calc(var(--kern-metric-baseline-heading-medium-padding-bottom, 8px) + var(--kern-metric-space-default, 16px)) var(--kern-metric-space-none, 0px);

        margin-top: var(--kern-metric-space-x-large, 32px);

        &:first-of-type {
            margin-top: var(--kern-metric-space-none, 0px);
        }
    }
}

.kern-summary {
    &__header {
        display: flex;
        padding: var(--kern-metric-space-default, 16px) var(--skern-pace-none, 0px);
        align-items: flex-start;
        gap: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
        align-self: stretch;

        .kern-number {
            margin-top: var(--kern-metric-space-x-small, 4px);
        }
    }

    .kern-title {
        font-weight: var(--kern-typography-font-weight-regular, 400);
    }

    &__body {
        display: flex;
        padding: var(--kern-metric-space-default, 16px);
        flex-direction: column;
        gap: var(--kern-metric-space-x-large, 32px);
        border-radius: var(--kern-metric-border-radius-default, 4px);
        background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
        @include mixins.forced-colors-border-1px;
    }
}