@use 'sass:map';

@import '../../_style/animation/variables.scss';
@import '../../_style/elevation/mixins.scss';

.md-popover {
  position: fixed;
  z-index: 110;

  > .content {
    overflow: hidden;
    border-radius: 2px;
    pointer-events: auto;
    will-change: opacity, transform;
    background-color: var(--md-background);

    @include md-elevation(16);

    /* util classes */

    > .md-popover-title {
      font-weight: bold;
      padding: 12px;
      border-bottom: 1px solid var(--md-border);
    }

    > .md-popover-content {
      padding: 12px;
    }

    > .md-popover-ctrl {
      display: flex;
      justify-content: flex-end;

      > .md-button {
        margin: 0;
      }

      > .md-button:not(:last-child) {
        margin-right: 6px;
      }
    }
  }
}

.md-popover-enter,
.md-popover-leave-active {
  opacity: 0;
}

.md-popover-enter-active {
  transition: transform 0.2s $md-transition-stand-timing, opacity 0.3s $md-transition-stand-timing;
}

.md-popover-leave-active {
  transition-duration: 0.15s;
  transition-property: opacity, transform;
  transition-timing-function: $md-transition-leave-timing;
}

$pto: (
  top: bottom center,
  top-start: bottom left,
  top-end: bottom right,
  bottom: top center,
  bottom-start: top left,
  bottom-end: top right,
  left: center right,
  left-start: top right,
  left-end: bottom right,
  right: center left,
  right-start: top left,
  right-end: bottom left,
);
$offset: 6px;
$pof: (
  bottom: translate3d(0, -$offset, 0),
  top: translate3d(0, $offset, 0),
  left: translate3d($offset, 0, 0),
  right: translate3d(-$offset, 0, 0),
);

@each $p in (left, right, top, bottom) {
  @each $s in ('', '-start', '-end') {
    [data-popper-placement='#{$p}#{$s}'] {
      > .md-popover-enter,
      > .md-popover-leave {
        transform-origin: map.get($pto, #{$p}#{$s});
      }

      > .md-popover-enter,
      > .md-popover-leave-active {
        transform: map.get($pof, $p) scale(0.95);
      }
    }
  }
}

[data-popper-placement] > .md-popover-enter.md-popover-enter-active {
  opacity: 1;
  transform: none;
}