btu-dialog {
  @apply contents;
}

/*
  Dialogs can be either modals or layered regions. We use container queries
  to help give the inner Popup element an explicit size & width. All dialogs
  handle their own animations (scale, transform, opacity, etc.).
*/
dialog {
  @apply m-0 grid !bg-transparent bg-none p-0 @container/dialog [block-size:100dvh] [container-type:size] [inline-size:auto] [margin-inline-end:auto] [max-block-size:100%] [overflow-y:hidden] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete];

  &:not([open]) {
    @apply hidden;
  }

  /* The inner content fades in when ready */
  .Popup .Popup-content {
    @apply opacity-0 [transition:opacity_0.3s_0.4s];
  }

  .Popup.is-ready.is-visible .Popup-content {
    @apply opacity-100 [@starting-style]:opacity-0;
  }
}

/* Non-modal Dialogs. Think of these as layered regions (eg: global search). */
dialog:not(:modal) {
  /* [inline-size:100%]: with container-type:size this dialog otherwise
     shrink-to-fits to 0, collapsing the popup's 100cqw (search appears empty). */
  @apply z-20 mt-[var(--page-header-h)] origin-top scale-y-100 opacity-100 [inline-size:100%] [grid-area:stack] [transition:transform_0.25s_cubic-bezier(0.9,0,0.1,1),opacity_0.15s_cubic-bezier(0.9,0,0.1,1)] max-md:fixed max-md:bottom-0 max-md:left-0 max-md:right-0 max-md:z-[200000] max-md:h-[calc(100dvh_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)-var(--page-title-h))] md:relative md:[block-size:auto] [@starting-style]:scale-y-0 [@starting-style]:opacity-0;

  .ComboInput-list {
    &[data-tether-rx='l'] {
      @apply /*rtl:ignore*/ left-[calc(var(--Tether-rl)_+_var(--Dropdown-markerSize))];
    }

    &[data-tether-ry='t'] {
      @apply top-[calc(var(--Tether-rt)_+_var(--Tether-rh)_+_var(--Dropdown-markerSize)_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)_-_var(--page-env-h)_-_var(--page-title-h))] md:top-[calc(var(--Tether-rt)_+_var(--Tether-rh)_+_var(--Dropdown-markerSize)_-_var(--page-broadcastAlert-h)-var(--page-broadcast-h)_-_var(--page-title-h))];
    }
  }
}

/*
  Modal dialogs.
  Note: To change the size of a modal dialog, override the `--popup-w` and `--popup-h`
  properties on the Popup element. Alternatively, apply either the `__modal-popup`
  or `__modal-popup-lg` mix-ins below.
*/
dialog:modal {
  /* fullsize popups (the default) use padding to reserve space for the popup drop shadow effect. */
  --padding: theme(spacing.4);

  /* Center modal dialogs by default. */
  @apply max-w-[100dvw] overflow-visible [padding-block:var(--padding)] [padding-inline:var(--padding)] [scale:1] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete,_opacity_0.4s_0.1s,_scale_0.25s_cubic-bezier(0.9,0,0.1,1)_0.3s];

  /* Modals have a blurred, slightly darkened backdrop */
  &::backdrop {
    @apply opacity-0 [background-color:theme(backdropColor.dialog)] [transition:opacity_0.3s_cubic-bezier(0.25,0,0.2,1),_backdrop-filter_0.3s_cubic-bezier(0.25,0,0.2,1)];
  }

  &[open] {
    &,
    &::backdrop {
      @apply opacity-100;
    }

    &::backdrop {
      @apply grayscale backdrop-blur;
    }
  }

  @starting-style {
    & {
      @apply opacity-0 [scale:0.7];
    }

    &[open],
    &[open]::backdrop {
      @apply opacity-0;
    }

    &[open]::backdrop {
      @apply [backdrop-filter:blur(0px)] [filter:grayscale(0)];
    }
  }

  &:has(.Popup.is-fromRight) {
    --padding: ; /* no padding for right-aligned popups. margin is necessary here. */
    @apply [margin-inline-start:auto] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete,_opacity_0.25s_0.3s,_translate_0.25s_cubic-bezier(0.9,0,0.1,1)_0.3s] [translate:0_0] md:[inline-size:70vw] md:[margin-inline-end:0] [@starting-style]:[translate:45dvw_0];

    /* Dropdown lists inside of right-aligned modals need to be shifted over. */
    .Dropdown,
    .ComboInput-list {
      &[data-tether-rx='l'] {
        @apply /*rtl:ignore*/ left-[calc(var(--Tether-rl)-30vw)];
      }
    }
  }
}

/* Center modal dialogs that don't slide in from a side */
btu-dialog[enter-from='center'] > dialog:modal {
  @apply content-center justify-items-center;
}

/* Hide loading spinner once popup is loaded */
btu-dialog[loaded] > dialog:modal {
  @apply before:hidden;
}

/* Medium (default) size for modal popups. */
.__modal-popup {
  --w: var(--popup-w, 100cqw);
  --h: var(--popup-h, 100cqh);

  @apply relative h-[--h] min-h-[--h] w-[--w] min-w-[--w] overflow-hidden rounded-2xl bg-white shadow-lg;

  /* Responsive sizes */
  @apply @dialog-md:[--h:var(--popup-h,_85cqh)] @dialog-md:[--w:var(--popup-w,_82cqw)] @dialog-lg:[--h:var(--popup-h,_65cqh)] @dialog-lg:[--w:var(--popup-w,_55cqw)];

  /* Loading UI */
  @apply before:btu-loader before:pointer-events-none before:absolute before:z-10 before:size-[--loader-size] before:[left:calc(50%_-_(var(--loader-size)/2))] before:[top:calc(50%_-_(var(--loader-size)/2))] before:[transition:transform_0.3s_cubic-bezier(0.9,0,0.1,1),opacity_0.4s_cubic-bezier(0.9,0,0.1,1)_allow-discrete];
}

/* Large size for modal popups. */
.__modal-popup-lg {
  @apply @dialog-md:[--h:var(--popup-h,_90cqh)] @dialog-md:[--w:var(--popup-w,_90cqw)] @dialog-lg:[--h:var(--popup-h,_80cqh)] @dialog-lg:[--w:var(--popup-w,_80cqw)];
}

dialog:modal > .Popup:where(:not([popover])),
dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
  /* By default, all modals get medium size. */
  @apply __modal-popup;

  /* Hide the loading spinner once the modal is loaded.
    The list of selectors reveals the amount of one-offs that popup
    markup currently has. */
  &:has(
      > .Popup-content > :where(.frame.is-transitioned, .ContentSummary.is-open)
    ),
  &.PrePublish.is-visible,
  &.popup-show[data-popup-source-class^='rte2'],
  &.popup-show[name='queryfield' i],
  &.popup-show:has(.Paste-popup) {
    @apply before:scale-[2] before:opacity-0;
  }

  /* The largest modals take up the full screen. */
  &:where(.is-noGap, .is-fromTop) {
    @apply [--popup-h:100cqh] [--popup-w:100cqw];
  }

  /* Modals that slide in from the right have special styling. */
  &:where(.is-fromRight) {
    --gap: 1rem;
    --w: var(--popup-w, calc(100cqw - (2 * var(--gap))));
    --h: var(--popup-h, calc(100cqh - (2 * var(--gap))));
    @apply [margin-block:var(--gap)] [margin-inline:var(--gap)];
  }

  .Popup-content {
    @apply grid grid-cols-[minmax(0,1fr)_min-content] grid-rows-[max-content_minmax(0,1fr)] content-baseline;
  }

  .Popup-content.is-editing {
    /* if the guide is open, make sure to account for its width. */
    --guide-w: var(--has-right-rail, var(--right-rail-w));

    @apply grid h-full overscroll-none transition-all max-md:overflow-hidden max-md:[grid-template:"title_title"_min-content_"top_top"_min-content_"status_status"_min-content_"content_content"_1fr_"bottom_bottom"_52px_/_1fr_min-content] md:grid-rows-[auto_auto_1fr] md:overflow-hidden md:[grid-template-areas:'title_title_title_title''top_top_top_top''left_preview_right_toolbar'];

    > .frame.plugin-popup {
      @apply contents;
    }

    .ContentEdit-top {
      @apply [grid-area:title];
    }

    .Guide-title {
      @apply btu-heading-4 me-2 flex content-center items-center gap-2 border-b-0 py-[.88rem] ps-6 text-gray-900 [grid-area:title];
    }

    .ContentEdit-top {
      @apply border-t border-t-gray-200;
    }

    .Popup-close {
      @apply absolute right-0 z-[1] max-md:me-4;
    }

    &.has-message {
      @apply md:grid-rows-[auto_auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'title_title_title_title''top_top_top_top''banner_banner_banner_banner''left_preview_right_toolbar'];
    }
  }

  /* Fix the ActionBar to the bottom of the modal. */
  &:where(
      :not(
          [name='toolUserTfa'],
          [name='contentTools'],
          [name='uploadFiles'],
          [name*='contentEnhancement']
        )
    )
    .Popup-content:where(.has-ActionBar:not(.has-AdminNav, .is-editing)) {
    @apply grid-rows-[[title]_max-content_[main]_1fr_max-content_[action-bar]];

    &.has-StatusMessage {
      @apply grid-rows-[[title]_max-content_[message]_max-content_[main]_1fr_max-content_[action-bar]];
    }

    *.has-ActionBarContent {
      @apply row-[main/action-bar] grid grid-rows-[subgrid] items-baseline;

      &.has-StatusMessage {
        @apply row-[message/action-bar];

        .Widget-title + .Message {
          @apply row-[message/main];
        }
      }

      &.SearchFields.has-tabs {
        @apply h-full grid-rows-[auto_[main]_1fr_max-content_[action-bar]];
      }
    }

    .Widget .has-ActionBarContent {
      @apply col-[fullbleed-start/fullbleed-end] grid-cols-subgrid;
    }

    :is(form, .TC, .AIChat-wrapper, .fixedScrollable).before-ActionBar {
      @apply col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
    }

    .ActionBar {
      @apply mt-0 h-max self-end;
    }
  }

  .Popup-content > :where(.Guide-title, .Widget-title, h1, h2, h3) {
    @apply btu-heading-4 col-start-1 flex min-w-0 content-center items-center gap-2 border-b-0 py-[.88rem] ps-6 text-gray-900;
  }

  .Popup-close {
    @apply my-[.88rem] me-6 ms-2;
  }

  > .Popup-content > :where(.frame.plugin-popup, form) {
    @apply col-span-full overflow-y-auto border-t border-t-gray-200;
  }

  /* While popups are loading (or when there's no popup title element), make sure the close button stays aligned to the right */
  .Popup-content .Popup-close {
    @apply first:ms-auto;
  }
}

/* Content Edit workflow popup — v4 lifecycle does not always remove [open]
when the workflow closes, so the general dialog:not([open]) rule is insufficient.
:not(:modal) catches a non-modal dialog still marked [open] but visually inactive;
[hidden] catches a modal dialog whose inner element was hidden by v4 code. */
dialog:has(> .ContentEdit-workflow):not(:modal),
dialog:has(> .ContentEdit-workflow[hidden]) {
  @apply hidden;

  /* This is to make sure backdrop disappears right after the workflow popup closes
  There's a tiny lag between the v4 events responsible for hiding the actual Content edit workflow popup &
  the v5 dialog close events causing the backdrop to stay visible a few seconds after the popup closes. */
  &::backdrop {
    @apply opacity-0;
  }
}

dialog:modal .ContentEdit-workflow {
  @apply __modal-popup grid grid-rows-[max-content_1fr_max-content];

  .ContentEdit-workflowBody {
    @apply !h-full overflow-y-auto;
  }
}

dialog:modal .ContentEdit-workflow {
  @apply opacity-100 [scale:1] before:scale-[2] before:opacity-0;
}

dialog:modal > .Popup.is-local {
  @apply bottom-auto left-auto right-auto top-auto transform-none [inline-size:fit-content] [max-height:100cqh] [transform-origin:initial]; /* reset the local styles */

  .Popup-content {
    @apply max-h-full;
  }
}

/* Query field popup */
dialog:not(:modal):has(.QueryField-frame > .Popup:not(.is-visible)) {
  @apply hidden backdrop:opacity-0;
}

/* ------------------------------------ */
/* Modals set to size large by default  */
/* ------------------------------------ */
dialog:modal > {
  .Popup[name^='contentEnhancement'],
  .Popup.ContentSummary-popup,
  .Popup[name='searchFields'],
  .Popup[name='edit-guide'] {
    @apply __modal-popup-lg;
  }
}

/* Enhancement popups in non-editing mode: auto-size height to content instead
   of using the fixed __modal-popup-lg dimensions. Editing mode restores the
   large fixed size because :has() stops matching once .is-editing is added. */
dialog:modal
  > .Popup[name^='contentEnhancement']:has(> .Popup-content:not(.is-editing)) {
  @apply [--popup-h:auto];
}

/* Compact internal spacing for non-editing enhancement popups. --space and
   --CIG-row-space match ContentEdit-right; --CIG-padding is further reduced
   from its default spacing.6 to fit the popup's compact layout. */
dialog:modal
  > .Popup[name^='contentEnhancement']
  > .Popup-content:not(.is-editing) {
  .Widget {
    --space: theme(spacing.4);
  }

  .CIG {
    --CIG-padding: theme(spacing.4);
  }

  .CIG-row {
    --CIG-row-space: 1rem;
  }
}

/* ------------------------------ */
/* Small, fixed-size modal popups */
/* ------------------------------ */
dialog:modal > .Popup[name='lookingGlass'] {
  @apply [--h:445px] @[492px]:[--h:420px] @[492px]:[--w:460px];
}

dialog:modal > .Popup[name='toolUserTfa'] {
  @apply [--h:630px] [--w:400px] @dialog-md:[--h:582px] @dialog-md:[--w:420px];
}

dialog:modal > {
  .Popup.is-calendar,
  .Popup[name='DateStringCalendarFrame'] {
    @apply [--h:auto] [--w:330px];

    .Popup-content > .frame.plugin-popup {
      @apply w-[328px] overflow-x-hidden border-none;
    }
  }
}

dialog:modal > .Popup[data-popup-source-class='rte2-toolbar-add-table'] {
  @apply [--h:402px]; /* The width can stay responsive for this widget */
}

/* Fixed size modals based on data attribute */
dialog:modal {
  > .Popup:has([data-popup-size='sm']) {
    @apply [--h:45cqh] @dialog-md:[--w:65cqw] @dialog-lg:[--w:55cqw];
  }

  > .Popup:has([data-popup-size='lg']) {
    @apply @dialog-md:[--h:100cqh] @dialog-md:[--w:90cqw] @dialog-lg:[--w:80cqw];
  }

  > .Popup:has([data-popup-size='auto-height']) {
    @apply [--h:auto];
  }
}

/* ---------------------------------------------------------------- */
/* Below are special contexts as seen in specific types of dialogs. */
/* ---------------------------------------------------------------- */

dialog:modal {
  /*--- Guides */
  .Popup-content > .Guide-title > Guide-controls {
    @apply relative right-[unset] top-[unset] blokk;

    .Guide-close {
      @apply hidden; /* Not needed since popups have a close button already. */
    }
  }
}

/* Pre Publish Popup:
This is a one off use case where you are in a content edit popup and then open the pre publish popup */
dialog dialog > .PrePublishPopup {
  --popup-h: initial;
  --popup-w: initial;
}

/* Post Publish Actions modal */
dialog:modal .PostPublish-form > div {
  @apply h-full;

  > * {
    @apply col-[content-start/content-end];
  }

  > h2 {
    @apply mt-6 h-7 content-center truncate text-sm font-semibold text-gray-700;
  }

  > btu-toggleable {
    @apply relative mb-12 mt-1.5 after:absolute after:-bottom-6 after:-left-[var(--space)] after:-right-[var(--space)] after:h-px after:bg-gray-200;
  }

  > div:where(:has(~ .ActionBar)),
  > :where(:has(+ .ActionBar)) {
    @apply relative col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
  }

  > .ActionBar {
    @apply col-[fullbleed-start/fullbleed-end];
  }
}

/* Post Publish Actions modal - grid layout requires extra specificity */
dialog:modal .Popup .Popup-content .Widget.has-ActionBarContent {
  .PostPublish-form > div {
    @apply grid-rows-[auto_minmax(0px,1fr)_auto];
  }

  &.has-StatusMessage .PostPublish-form > div {
    @apply grid-rows-[auto_auto_minmax(0px,1fr)_auto];
  }
}

/* Loader shows in search input when global search is first opening */
.Page.is-searchOpening .Page-search > btu-search-input > label {
  @apply before:btu-loader;
}
