@use '../../variables' as *;

.popover {
  position: fixed;
  max-height: 100vh;
  max-width: 100vw;
  z-index: 999;
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;

  /* Reset positioning properties - will be set by position-area when anchored */
  top: auto;
  left: auto;
  transform: none;

  /* Center popover when no anchor is provided */
  &:not([style*='position-anchor']) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Allow automatic position adjustment */
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;

  /* Default: hide backdrop for regular popovers by making it transparent */
  &::backdrop {
    background: transparent;
    pointer-events: none;
  }
}

/* Modal backdrop - enabled via showBackdrop prop */
.popover[data-show-backdrop='true']::backdrop {
  background-color: var(--modal-overlay-background);
  pointer-events: auto;
}

/* Shadow level */
.popover[data-shadow-level='level1'] {
  filter: var(--shadow-level-1);
}
.popover[data-shadow-level='level2'] {
  filter: var(--shadow-level-2);
}
.popover[data-shadow-level='level3'] {
  filter: var(--shadow-level-3);
}
.popover[data-shadow-level='level4'] {
  filter: var(--shadow-level-4);
}

/* Interest Invoker API - use the shorthand: */
[interestfor] {
  interest-delay: 0ms 100ms;
  --interest-delay: 0ms 100ms;
}

/* Animations */
.popover[data-animate='true']:popover-open {
  animation: fade-in 0.2s ease;
}
.popover[data-animate='true']:popover-open::backdrop {
  animation: fade-in-backdrop 0.1s ease;
}

.popover[data-animate='true'][data-placement='top'] {
  transform-origin: bottom center;
}
.popover[data-animate='true'][data-placement='bottom'] {
  transform-origin: top center;
}
.popover[data-animate='true'][data-placement='left'] {
  transform-origin: right center;
}
.popover[data-animate='true'][data-placement='right'] {
  transform-origin: left center;
}
.popover[data-animate='true'][data-placement='top-start'] {
  transform-origin: bottom left;
}
.popover[data-animate='true'][data-placement='top-end'] {
  transform-origin: bottom right;
}
.popover[data-animate='true'][data-placement='bottom-start'] {
  transform-origin: top left;
}
.popover[data-animate='true'][data-placement='bottom-end'] {
  transform-origin: top right;
}
.popover[data-animate='true'][data-placement='left-start'] {
  transform-origin: right top;
}
.popover[data-animate='true'][data-placement='left-end'] {
  transform-origin: right bottom;
}
.popover[data-animate='true'][data-placement='right-start'] {
  transform-origin: left top;
}
.popover[data-animate='true'][data-placement='right-end'] {
  transform-origin: left bottom;
}

@keyframes fade-in {
  from {
    scale: 0.96;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-backdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}