// The alert dialogs' shared geometry. Both partials declare it with `!default`
// so either compiles standalone; `_tempalte-base.scss` imports ConfirmationAlert
// first, so that copy is the one that takes effect. The two dialogs are the same
// window with different artwork, and every measure they share is declared once
// on each side rather than written twice as a literal.
$alert-dialog-width: 520px !default;
$alert-dialog-min-height: 300px !default;

// A two-character action ("No", "OK") still has to read as a button. A floor,
// and the only measure either action states — the height comes from the
// package's button box (`$btn-line`, GridToolBar partial) and is intrinsic.
//
// 110px was chosen against a 40px-tall action. Under the 26px box that is a
// 4.2:1 bar; 80px puts the proportion back where it was drawn.
$alert-action-min-width: 80px !default;

// The scrim behind a Kendo dialog. On the theme's shadow hue rather than pure
// black, so the dim and the elevation over it are lit by the same light.
$alert-scrim: rgba($shadow-color, 0.45) !default;

// How close a modal may come to the viewport edge — one pair for all five
// windows in this package. They ran three different pairs: 85vh/90vw on the two
// GridToolBar dialogs, 85vh/92vw on the column chooser, 90vh/92vw on the two
// alerts. Nothing distinguished them; they were each capped by whoever wrote
// them. Declared with `!default` in all three partials that need it — this
// file and the two alert partials — so each compiles standalone and no copy can
// disagree with the others.
$dialog-viewport-max-width: 92vw !default;
$dialog-viewport-max-height: 90vh !default;

// One icon box for all three paths the schema can take — the packaged
// illustration, a host image (`iconUrl`) and the ICON widget (`iconName`).
// They rendered at 110x90, up to 96 square and 88 square respectively, so the
// header and everything below it started up to 8px higher or lower depending
// on which path a screen happened to use.
$dialog-icon-width: 110px;
$dialog-icon-height: 90px;

.tmpl-confirmation-dialog {
  .k-dialog {
    // The package's modal elevation — see the elevation note in
    // GridToolBar/scss. Both alerts carried a two-layer shadow of their own
    // (24/64 at 0.18), a third value beside the three in-package dialogs
    // (24/48 at 0.12) and the theme's ramp.
    box-shadow: $shadow-xl !important;
    width: $alert-dialog-width;
    // A floor, not a height. The body is free text, so a fixed height makes a
    // two-paragraph message scroll inside a half-empty window; max-height still
    // caps it on a short screen.
    min-height: $alert-dialog-min-height;
    max-width: $dialog-viewport-max-width;
    max-height: $dialog-viewport-max-height;
    overflow: hidden;
    background-color: $background-default;
  }

  .k-overlay {
    background-color: $alert-scrim;
  }

  .k-window-titlebar,
  .k-dialog-titlebar {
    display: none;
  }

  // Mirror InformationAlert: stretch Kendo's content wrapper so the inner
  // container can flex its footer to the bottom edge.
  .k-window-content,
  .k-dialog-content {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
}

.tmpl-dialog-box-container {
  flex: 1;
  // Lets the body below shrink under its content instead of pushing the footer
  // past the dialog edge.
  min-height: 0;
  display: flex;
  flex-direction: column;
  // Shared dialog rhythm — the same measures the GridToolBar dialogs use.
  padding: $space-lg;
  text-align: center;

  .tmpl-dialog-box__icon-wrapper {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    // The box, not the artwork: each path centres inside one fixed height, so
    // the header below it does not move with the schema's choice of icon.
    justify-content: center;
    height: $dialog-icon-height;
    margin-bottom: $space-xl;

    .tmpl-dialog-box__svg-icon {
      width: $dialog-icon-width;
      height: $dialog-icon-height;
      display: block;
    }

    .tmpl-dialog-box__icon-image {
      max-width: $dialog-icon-width;
      max-height: $dialog-icon-height;
      width: auto;
      height: auto;
      object-fit: contain;
      user-select: none;
    }

    // Fallback path: FactoryRenderer ICON renders inside a Kendo button.
    // Strip the button chrome and let the SVG breathe.
    .k-button {
      width: $dialog-icon-height;
      height: $dialog-icon-height;
      // A floor would beat the height above — the lesson from the 2.4.0 button
      // regression.
      min-height: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      pointer-events: none;

      svg,
      .k-icon {
        font-size: $size-xxl;
        width: $size-xxl;
        height: $size-xxl;
        color: $text-secondary;
      }
    }
  }

  .tmpl-dialog-box__header {
    flex: 0 0 auto;
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: $text-dark;
    margin: 0;
    // The dialog rhythm's header-to-body measure, the same one the column
    // chooser and Create New View use. It was $space-sm here.
    padding: 0 0 $space-md 0;
    text-align: center;
    line-height: $line-height-md;
  }

  .tmpl-dialog-box__body {
    // The scroll section: the one part of this dialog whose length is not ours
    // to predict.
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    p {
      color: $text-secondary;
      font-size: $font-size-sm;
      font-weight: $font-weight-regular;
      line-height: $line-height-md;
      text-align: center;
      margin: 0;
      padding: 0;
    }
  }

  .tmpl-dialog-box__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $space-md;
    margin-top: auto;
    padding-top: $space-lg;

    // Height, side padding, radius, type and every state come from the theme's
    // button ramp — both actions carry `qo-btn qo-btn-md`, and the cancel its
    // `qo-btn-default` variant. Nothing here restates them.
    //
    // This block used to re-declare all five at (0,3,0), which outranks
    // `.qo-btn.qo-btn-md` (0,2,0), and hand-rolled the default variant's fill,
    // border and hover beside it. The values agreed with the ramp on the day
    // they were written; the specificity meant they would have kept their own
    // copy silently as the ramp moved.
    //
    // What is left is this dialog's own: a floor wide enough that a
    // two-character action still reads as a button.
    .k-button {
      min-width: $alert-action-min-width;
    }
  }
}

// Deliberately global, and the only radius any Kendo dialog in the stack gets:
// $border-radius-lg, matching the three in-package dialogs (column chooser,
// Create New View, Select a new group). The alerts used to override it to lg
// scoped to themselves while this rule left every other dialog at md — two
// radii for the same kind of window.
.k-dialog {
  border-radius: $border-radius-lg !important;
}