/**
 * @file _dialog.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 Dialog Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Dialog Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */

@use "sass:map";
@use '../utilities/maps';

.kern-dialog {
    max-width: var(--kern-small, 768px); // TODO: DEV --kern-small ist nicht definiert, default greift, breakpoints definieren!
    border-radius: var(--kern-metric-border-radius-large, 8px);
    border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border-contextual, #6E7597);
    background: var(--kern-color-layout-background-default-contextual, #FFF);

    padding: var(--kern-metric-space-none, 0px);

    &__header {
        display: flex;
        justify-content: space-between;
        min-height: var(--kern-metric-dimension-3x-large, 64px);
        padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-large, 32px);
        align-items: flex-start;
        gap: var(--kern-metric-space-default, 16px);
    }

    .kern-title {
        display: flex;
        align-items: flex-start;
        gap: var(--kern-metric-space-none, 0px);
        flex: 1 0 0;
    }

    &__body {
        display: flex;
        padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kern-metric-space-default, 16px);
    }

    &__footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
        align-items: flex-start;
        gap: var(--kern-metric-space-default, 16px);
        padding: var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px);
        border-top: 1px solid var(--kern-color-decorative-border-contextual, #C0C3D5);

        @media (max-width: map.get(maps.$grid-breakpoints, sm)) {
            flex-direction: column;
        }

        .kern-btn {
            flex-grow: 1;
            align-self: stretch;

            +.kern-btn {
                margin-left: var(--kern-metric-space-none, 0px);
            }
        }
    }

    &::backdrop {
        background: var(--kern-color-black, #000);
        opacity: var(--kern-color-action-state-opacity-overlay, 0.72);
    }

    @media (max-width: map.get(maps.$grid-breakpoints, md)) {
        overflow-y: auto;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: var(--kern-metric-space-none, 0px);
        border-radius: var(--border-radius-large, 8px) var(--kern-metric-border-radius-large, 8px) var(--kern-metric-border-radius-none, 0px) var(--kern-metric-border-radius-none, 0px);
    }

}