@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

$floatingBaseClass: '#{constants.$prefix}floatingui';

// Fluent 2 dialog motion duration (durationGentle).
$dialog-motion-duration: 0.25s;

.#{$floatingBaseClass} {
  z-index: 999;
  position: absolute;
  inset: unset;
  top: 0;
  left: 0;
  width: max-content;

  // Only reset browser popover defaults when element actually uses the Popover API
  // https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#styling_popovers
  &[popover] {
    overflow: unset;
    border: unset;
  }

  &__arrow {
    position: absolute;
    // to allow the beak to be positioned correctly
    transform-origin: bottom center;
  }

  &__overlay {
    background: tokens.$bm-comp-dialog-color-overlay;
    padding: tokens.$bm-comp-dialog-space-viewport-offset;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1;

    &--transparent {
      background: transparent;
    }

    // Backdrop scrim fade (Fluent 2 "FadeRelaxed": durationGentle, curveEasyEase).
    // Only the scrim's background-color animates — the overlay's own opacity stays 1 so
    // it never compounds the surface's opacity (the surface fades + scales separately;
    // see dialog.module.scss). The content's data-status drives the open/close state.
    // Dialog-scoped via `.bm-dialog`, mirroring the `:has(.panel--contained)` pattern
    // below. Keep duration in sync with transitionConfig in Dialog.tsx.
    &:has(.#{constants.$prefix}dialog) {
      background-color: transparent;
      transition: background-color $dialog-motion-duration
        cubic-bezier(0.33, 0, 0.67, 1);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &:has(.#{constants.$prefix}dialog[data-status='open']) {
      background-color: tokens.$bm-comp-dialog-color-overlay;
    }

    // Scrim fade for modal Panel (isModal), same timing as Dialog scrim.
    &:has(.#{constants.$prefix}panel--overlay[aria-modal]) {
      background-color: transparent;
      transition: background-color $dialog-motion-duration
        cubic-bezier(0.33, 0, 0.67, 1);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &:has(.#{constants.$prefix}panel--overlay[aria-modal][data-status='open']) {
      background-color: tokens.$bm-comp-dialog-color-overlay;
    }

    // FloatingUI applies position:fixed as an inline style; !important is required to
    // override it when the backdrop is scoped inside a container (contained Panel).
    // Targets the Panel `--contained` modifier. If that modifier is renamed in
    // panel.module.scss, update this selector to match.
    &:has(.#{constants.$prefix}panel--contained) {
      position: absolute !important;
      inset: 0;
      // Clip slide transforms without creating a scroll container.
      overflow: clip !important;
    }

    // Non-modal Panel: the overlay is required only as a clip/scroll-isolation layer
    // (its `overflow: clip` keeps the off-screen slide from inflating — and scrolling —
    // the consumer's container). It must NOT dim or block the page. Keyed off the Panel
    // lacking `aria-modal`, which is only set for isModal/alert.
    &:has(.#{constants.$prefix}panel--overlay:not([aria-modal])) {
      background: transparent;
      pointer-events: none;
      overflow: clip;

      // Re-enable interaction on the panel itself (the rest of the page stays clickable).
      .#{constants.$prefix}panel--overlay {
        pointer-events: auto;
      }
    }
  }
}