/**
 * @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 23.05.2025
 * @@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, #A5AAC3);
  background: var(--kern-color-layout-background-default, #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-layout-border, #A5AAC3);

    @media (max-width: 576px) {
      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-layout-background-overlay);
  }

  @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);
  }

}