@use '../../style/theming';

// MARK: Variables
$max-dialog-width: 90vw;
$dbx-dialog-content-close-edge-padding: 4px;
$dbx-dialog-content-close-top-offset: $dbx-dialog-content-close-edge-padding;
$dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;

// MARK: Mixin
@mixin core() {
  // Restores the pre-M3 default ceiling on the dialog panel's width.
  //
  // Angular Material caps `.cdk-overlay-pane.mat-mdc-dialog-panel` with
  // `--mat-dialog-container-max-width`, whose baked-in fallback is the M3 spec value of 560px (under M2
  // theming it was 80vw). Because `max-width` outranks the `width` a dialog is opened with, the 560px
  // value silently defeats every dialog that asks to be wide — most visibly `DbxInjectionDialogComponent`,
  // which opens at `width: 80vw; height: 80vh` and therefore renders full-height but only 560px wide.
  //
  // This only lifts a ceiling: a dialog opened without an explicit `width` is still content-sized, so
  // nothing that did not already ask to be wider than 560px changes size. The <=599px breakpoint reads a
  // separate token (`--mat-dialog-container-small-max-width`, defaulting to `calc(100vw - 32px)`) and is
  // left alone, so phone-width dialogs keep Material's near-full-screen behavior.
  //
  // Declared on the CDK overlay container rather than `:root`, and that placement is load-bearing:
  // `theme()` emits `mat.all-component-themes()` — and with it `--mat-dialog-container-max-width: 560px` —
  // under the app's theme selector, which `dbxStyleBody` puts on `<body>`, while the overlay container is
  // appended to `<body>` as a child. A `:root` (`<html>`) declaration is therefore shadowed by the nearer
  // `<body>` value no matter how it is ordered or how specific it is. `.cdk-overlay-container` sits between
  // the themed body and every dialog pane, so its declaration is the one each pane inherits. For that same
  // reason an app retunes this through `--dbx-dialog-max-width` (inherited from `:root`, read here) rather
  // than by declaring the Material token itself.
  .cdk-overlay-container {
    --mat-dialog-container-max-width: var(--dbx-dialog-max-width, 80vw);
  }

  .mat-mdc-dialog-surface {
    color: var(--mat-sys-on-surface);
  }

  /// @dbx-utility dialog-content
  /// @intent dialog body — `<dbx-dialog-content>` host that wraps mat-dialog content with the standard 18px inset; compose with `.dbx-dialog-content-with-header` to reserve room for a sticky header, `.dbx-dialog-content-100` to fill the dialog height, or `.dbx-p0` to strip the inset
  /// @role layout
  /// @component DbxDialogContentComponent
  /// @scope component-class
  .dbx-dialog-content {
    display: block;
    padding: var(--dbx-dialog-content-padding, var(--dbx-padding-4));
  }

  .dbx-dialog-content-with-header {
    height: 100%;
    $dbx-dialog-content-header-height: 22px;
    $dbx-dialog-content-header-padding: 18px;

    .dbx-dialog-content-close.dbx-dialog-content-close-padding {
      padding-bottom: var(--dbx-padding-3);
    }

    .dbx-dialog-content-header {
      height: $dbx-dialog-content-header-height;
      margin: 0;
    }

    &.dbx-p0 .dbx-dialog-content-header {
      padding: $dbx-dialog-content-header-padding 0;
    }

    // h3 gets padded away from edge
    &.dbx-p0 h3.dbx-dialog-content-header {
      padding-left: $dbx-dialog-content-header-padding/2;
    }

    // add case specifically for dbx-two-column
    .dbx-two-column {
      height: calc(100% - ($dbx-dialog-content-header-height + ($dbx-dialog-content-header-padding * 2)));
    }
  }

  .dbx-dialog-content.normal-dialog-content {
    min-width: unset;
  }

  .mdc-dialog__container .dbx-dialog-content {
    &.wide-dialog-content {
      width: $max-dialog-width;
    }
  }

  .dbx-dialog-content-close {
    display: flex;
    height: 0px;
    align-items: center;
    justify-content: flex-end;
  }

  .mdc-dialog__container .dbx-dialog-content-close > .dbx-dialog-content-close-button {
    position: absolute;
    top: $dbx-dialog-content-close-top-offset;
    right: $dbx-dialog-content-close-right-offset;
  }

  .dbx-dialog-content-close.dbx-dialog-content-close-padding {
    padding-bottom: var(--dbx-dialog-content-padding, var(--dbx-padding-4));

    > .dbx-dialog-content-close-button {
      top: $dbx-dialog-content-close-edge-padding;
    }
  }

  .dbx-dialog-content-footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dbx-dialog-content-100.dbx-dialog-content {
    height: 100%;
  }

  .dbx-dialog-content-100.dbx-dialog-content-100-padded-closed.dbx-dialog-content {
    height: calc(100% - (var(--dbx-dialog-content-padding, var(--dbx-padding-4)) * 3));
  }
}

@mixin theme($theme-config) {
}