/**
 * px-popover styles
 */
.px-popover {
  // Generic
  //@import "px-box-sizing-design/_generic.box-sizing.scss";
  // Base
  @import "px-headings-design/_base.headings.scss";
  $popover-background-color: var(--px-popover-background-color, white);
  $popover-border-color    : var(--px-popover-border-color, black);
  $popover-text-color      : var(--px-popover-text-color, black);
  $popover-shadow-color    : var(--px-popover-shadow-color, black);
  $popover-max-width       : var(--px-popover-max-width, 3000px);

  &--is-open {
    .popover__carat {
      //border          : 1px solid transparent;
      //border-color    : #d8e0e5 transparent transparent #d8e0e5;
      //transform-origin: 50% 50%;
      //transform       : rotate(-45deg);
      box-shadow: 1px 1px 0 white, -1px 0 1px rgba(0, 0, 0, 0.15);
    }
  }

  .popover__wrapper {
    position: absolute;
    z-index : 1005;
    margin  : 5px;
  }

  .fadeFromVisible {
    opacity   : 0;
    visibility: hidden;
    transition: visibility 0s 0.10s, opacity 0.10s ease-out;
  }

  .fadeFromHidden {
    transition: opacity 0.10s ease-out;
    opacity   : 1;
    visibility: visible;
  }

  .popover {
    outline         : none;
    padding         : 20px;
    max-width       : $popover-max-width;
    border          : 1px solid $popover-border-color;
    background-color: $popover-background-color;
    margin          : 7px;
    color           : $popover-text-color;
    box-shadow      : 0 1px 3px 0 $popover-shadow-color;

    h5 {
      margin: 0 0 20px;
    }

    p {
      margin   : 0;
      word-wrap: break-word;
    }
  }

  .popover__carat {
    position        : absolute;
    width           : 9.899px; //sqrt(7*7 + 7*7)
    height          : 9.899px;
    background-color: $popover-background-color;

    &.top {
      border          : 1px solid transparent;
      border-color    : transparent transparent $popover-border-color $popover-border-color;
      transform-origin: 50% 50%;
      transform       : rotate(-45deg);
      box-shadow      : 1px 0 0 $popover-background-color, -1px 1px 1px $popover-shadow-color;
    }

    &.bottom {
      border          : 1px solid transparent;
      border-color    : $popover-border-color transparent transparent $popover-border-color;
      transform-origin: 50% 50%;
      transform       : rotate(45deg);
    }

    &.left {
      border          : 1px solid transparent;
      border-color    : $popover-border-color $popover-border-color transparent transparent;
      transform-origin: 50% 50%;
      transform       : rotate(45deg);
      box-shadow      : -1px 1px 0 $popover-background-color, 1px 0 1px $popover-shadow-color;
    }

    &.auto,
    &.right {
      border          : 1px solid transparent;
      border-color    : $popover-border-color transparent transparent $popover-border-color;
      transform-origin: 50% 50%;
      transform       : rotate(-45deg);
      box-shadow      : 1px 1px 0 $popover-background-color, -1px 0 1px $popover-shadow-color;
    }
  }
  // Mozilla has a rendering issue drawing a thin line around the carat when the drop shadow despite the overlapping
  @-moz-document url-prefix() {
    .popover__carat {
      &.top {
        box-shadow: -1px 1px 0 $popover-shadow-color;
      }

      &.left {
        box-shadow: 0 2px 0 $popover-background-color, 1px 0 0 $popover-shadow-color;
      }

      &.right {
        box-shadow: 0 2px 0 $popover-background-color, -1px 0 0 $popover-shadow-color;
      }
    }
  }
}