/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;
@use '../../containers/Panel/Panel.module.scss' as Panel;

@layer baklava.components {
  .bk-dialog {
    @include bk.component-base(bk-dialog);
    @include Panel.panel; // Reuse styling from `Panel`
    
    --bk-dialog-background-color: var(--bk-panel-background-color);
    --bk-dialog-padding-block: #{bk.$spacing-8};
    --bk-dialog-padding-inline: #{bk.$spacing-8};
    
    overflow: hidden;
    
    margin: 0;
    padding: 0; // Do not apply padding on the outermost container (do it on the lower level elements instead)
    
    border-radius: bk.$radius-3;
    &.bk-dialog--flat {
      border: none;
      border-radius: 0;
    }
    background: var(--bk-dialog-background-color);
    color: bk.$theme-modal-text-default;
    
    --display: flex; // Note: don't set the `display` directly, leave it to `reset.scss` (see comments there)
    flex-direction: column;
    
    .bk-dialog__header {
      position: sticky;
      inset-block-start: -1px; // -1px to prevent bleed through due to pixel rounding
      z-index: 1;
      
      padding-block: var(--bk-dialog-padding-block) calc(bk.$spacing-7 / 2);
      padding-block-start: calc(var(--bk-dialog-padding-block) + 1px); // 1px to compensate for `top: -1px`
      padding-inline: var(--bk-dialog-padding-inline);
      background: var(--bk-dialog-background-color);
      
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: bk.$spacing-4;
      
      .bk-dialog__header__title {
        flex-grow: 1;
        @include bk.text-one-line;
      }
      
      .bk-dialog__header__actions {
        margin-inline-start: auto;
        
        .bk-dialog__header-action-close { --keep: ; }
      }
    }
    
    .bk-dialog__content {
      scroll-margin-top: 100lh; // Workaround for an issue where the content scroll behind the header on focus
      flex: 1;
      
      margin-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-7 / 2);
      padding-inline: var(--bk-dialog-padding-inline);
      
      @include bk.flex($dir: row, $gap: bk.$spacing-3);
    }
    
    .bk-dialog__content__icon-aside {
      flex-shrink: 0;
      align-self: flex-start;
      font-size: 1.4em;
      
      @include bk.flex-row($gap: bk.$spacing-3);
    }
    
    .bk-dialog__content__body { flex-grow: 1; }
    
    .bk-dialog__actions {
      position: sticky;
      inset-block-end: -1px; // -1px to prevent bleed through due to pixel rounding
      z-index: 1;
      
      padding-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-9 + 1px); // 1px to compensate for `bottom: -1px`
      padding-inline: var(--bk-dialog-padding-inline);
      // In Figma, actions have an indent. But that might be only if the content itself has an indent, need to check.
      //padding-inline-start: calc(var(--bk-dialog-padding-inline) + bk.$spacing-8);
      
      background: var(--bk-dialog-background-color);
      
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: bk.$spacing-4;
      
      .bk-dialog__action { --keep: ; }
      .bk-dialog__action--icon { --keep: ; }
    }
    
    &.bk-dialog--icon-aside {
      .bk-dialog__actions {
        padding-inline-start: bk.$spacing-11;
      }
    }
    
    // State: focus
    @include bk.focus-outset;
  }
}
