@reference 'tailwindcss';

:host {
  --emr-popover-border: none;
  --emr-popover-shadow: theme(--shadow-lg);
  --emr-popover-border-radius: theme(--radius-2xl);
  --emr-popover-bg: var(--color-surface-container-lowest);
  --emr-popover-margin: --spacing(2.5);

  display: block;
  position: relative;
  border-radius: var(--emr-popover-border-radius);
  background-color: var(--emr-popover-bg);
  border: var(--emr-popover-border);
  box-shadow: var(--emr-popover-shadow);
  animation: .15s emr-popover-animation;

  @keyframes emr-popover-animation {
    0% {
      transform: scale(.9);
      opacity: 0;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

:host-context(.emr-overlay-above) {
  margin-bottom: var(--emr-popover-margin);
  transform-origin: bottom;
}

:host-context(.emr-overlay-below) {
  margin-top: var(--emr-popover-margin);
  transform-origin: top;
}

:host-context(.emr-overlay-before) {
  margin-inline-end: var(--emr-popover-margin);
  transform-origin: right;
}

:host-context(.emr-overlay-after) {
  margin-inline-start: var(--emr-popover-margin);
  transform-origin: left;
}

:host-context(html.dark) {
  --emr-popover-bg: var(--color-neutral-1000);
}
