@mixin popup() {
  // z-indexes
  $container-z: 1;
  $main-z: 1;

  // main container
  $main-container__min-height: 48px !default;

  // Heights slightly less than half of the correlated view height.
  $main-container__height--xlarge: 460px !default;
  $main-container__height--large: 400px !default;
  $main-container__height--medium: 340px !default;
  $main-container__height--less-than-medium: 300px !default;

  $main-container__width--xlarge: 460px !default;
  $main-container__width--large: 400px !default;
  $main-container__width--medium: 340px !default;
  $main-container__width--less-than-medium: 280px !default;

  // pointer
  $popup-pointer__width: 12 !default;
  $popup-pointer__height: 12 !default;
  $popup-pointer__scale-x: 0.75 !default;
  $popup-pointer__scale-y: 2 !default;
  $popup-pointer__scale-x--corner: 1 !default;
  $popup-pointer__scale-y--corner: 3.5 !default;

  ///////////////
  // POINTER
  $half_pointer_width: ($popup-pointer__width * 0.5) + px;
  $half_pointer_height: ($popup-pointer__height * 0.5) + px;
  $neg_half_pointer_width: (-($popup-pointer__width * 0.5)) + px;
  $neg_half_pointer_height: (-($popup-pointer__height * 0.5)) + px;

  .geoscene-ui {
    .geoscene-popup {
      display: flex;
      position: absolute;
      flex-flow: column nowrap;
      z-index: $container-z;
      pointer-events: none;

      .geoscene-features {
        flex: 1;
        width: 100%;
      }

      .geoscene-widget__heading {
        margin: 0;
      }
    }

    .geoscene-popup--hidden {
      display: none;
    }
  }

  .geoscene-popup--shadow {
    @include boxShadow("0 1px 4px rgba(0, 0, 0, .8)");
  }

  .geoscene-popup--aligned {
    &-top-center {
      transform-origin: 50% 100%;
    }

    &-bottom-center {
      transform-origin: 50% -5%;
    }

    &-top-left,
    &-bottom-left {
      transform-origin: 100% 50%;
    }

    &-top-right,
    &-bottom-right {
      transform-origin: -5% 50%;
    }

    &-top {
      &-center,
      &-left,
      &-right {
        animation: popup-intro-animation-down 200ms ease-in-out;
      }
    }

    &-bottom {
      &-center,
      &-left,
      &-right {
        animation: popup-intro-animation-up 200ms ease-in-out;
      }
    }
  }

  .geoscene-popup__main-container {
    display: flex;
    position: relative;
    z-index: $main-z;
    background-color: $background-color;
    width: 340px;
    min-height: $main-container__min-height;
    max-height: $main-container__height--medium;
    overflow: hidden;
    pointer-events: auto;
  }

  .geoscene-popup__pointer {
    position: absolute;
    width: 0;
    height: 0;
  }

  .geoscene-popup__pointer-direction {
    @include pointerStyle($popup-pointer__width, $popup-pointer__height);

    background-color: $background-color;
  }

  .geoscene-popup--aligned-top-center .geoscene-popup__pointer {
    top: 100%;
    left: 50%;
    margin: 0 0 0 $neg_half_pointer_width;
  }

  .geoscene-popup--aligned-bottom-center .geoscene-popup__pointer {
    bottom: 100%;
    left: 50%;
    margin: 0 0 0 $neg_half_pointer_width;
  }

  .geoscene-popup--aligned-top-left .geoscene-popup__pointer {
    right: $half_pointer_width;
    bottom: $half_pointer_height;
    transform: rotate(-45deg);
  }

  .geoscene-popup--aligned-bottom-left .geoscene-popup__pointer {
    top: $half_pointer_height;
    right: $half_pointer_width;
    transform: rotate(45deg);
  }

  .geoscene-popup--aligned-top-right .geoscene-popup__pointer {
    bottom: $half_pointer_height;
    left: $half_pointer_width;
    transform: rotate(45deg);
  }

  .geoscene-popup--aligned-bottom-right .geoscene-popup__pointer {
    top: $half_pointer_height;
    left: $half_pointer_width;
    transform: rotate(-45deg);
  }

  .geoscene-popup--aligned-top-center .geoscene-popup__pointer-direction,
  .geoscene-popup--aligned-bottom-center .geoscene-popup__pointer-direction {
    transform: scale($popup-pointer__scale-x, $popup-pointer__scale-y) rotate(45deg);
  }

  .geoscene-popup--aligned-top-left .geoscene-popup__pointer-direction,
  .geoscene-popup--aligned-bottom-left .geoscene-popup__pointer-direction,
  .geoscene-popup--aligned-top-right .geoscene-popup__pointer-direction,
  .geoscene-popup--aligned-bottom-right .geoscene-popup__pointer-direction {
    top: $neg_half_pointer_height;
    left: $neg_half_pointer_width;
    transform: scale($popup-pointer__scale-x--corner, $popup-pointer__scale-y--corner) rotate(45deg);
  }

  .geoscene-popup--aligned-top-center .geoscene-popup__pointer-direction {
    top: $neg_half_pointer_height;
    left: 0;
  }

  .geoscene-popup--aligned-bottom-center .geoscene-popup__pointer-direction {
    bottom: $neg_half_pointer_height;
    left: 0;
  }

  ///////////////////
  //  SCREEN SIZES
  //  WIDTHS
  .geoscene-view-width-xlarge {
    .geoscene-popup__main-container {
      width: $main-container__width--xlarge;
    }
  }

  .geoscene-view-width-large {
    .geoscene-popup__main-container {
      width: $main-container__width--large;
    }
  }

  .geoscene-view-width-medium {
    .geoscene-popup__main-container {
      width: $main-container__width--medium;
    }
  }

  .geoscene-view-width-less-than-medium {
    .geoscene-popup__main-container {
      width: $main-container__width--less-than-medium;
    }
  }

  .geoscene-view-width-xsmall .geoscene-popup--is-docked-bottom-center {
    margin-bottom: $docked-margin + 1;
  }

  .geoscene-view-width-xsmall .geoscene-popup--is-docked-top-center,
  .geoscene-view-width-xsmall .geoscene-popup--is-docked-bottom-center {
    margin: 0;
    width: auto;

    .geoscene-popup__main-container {
      position: absolute;
      right: 0;
      left: 0;
      width: 100%;
      max-height: 75%;
    }
  }

  .geoscene-view-width-xsmall .geoscene-popup--is-docked-bottom-center .geoscene-popup__main-container {
    bottom: 0;
  }

  .geoscene-view-width-xsmall .geoscene-popup--is-docked-top-center .geoscene-popup__main-container {
    top: 0;
  }

  //  HEIGHTS
  .geoscene-view-height-xlarge {
    @include popupHeight_BasedOnViewSize($main-container__height--xlarge);
  }

  .geoscene-view-height-large {
    @include popupHeight_BasedOnViewSize($main-container__height--large);
  }

  .geoscene-view-height-less-than-medium {
    @include popupHeight_BasedOnViewSize($main-container__height--less-than-medium);
  }

  //  SCREEN SIZES
  ///////////////////
  ///////////////////
  // DOCKED
  .geoscene-popup--is-docked {
    inset: 0;
    margin: $docked-margin $docked-margin $docked-margin--double $docked-margin;
    animation: geoscene-docking-animation 250ms ease-out;
  }

  .geoscene-ui .geoscene-popup--is-docked {
    flex-flow: row nowrap;
  }

  .geoscene-popup--is-docked-top-left,
  .geoscene-popup--is-docked-top-center,
  .geoscene-popup--is-docked-top-right {
    align-items: flex-start;
  }

  .geoscene-popup--is-docked-bottom-left,
  .geoscene-popup--is-docked-bottom-center,
  .geoscene-popup--is-docked-bottom-right {
    align-items: flex-end;
  }

  .geoscene-popup--is-docked-top-left,
  .geoscene-popup--is-docked-bottom-left {
    justify-content: flex-start;
  }

  .geoscene-popup--is-docked-top-center,
  .geoscene-popup--is-docked-bottom-center {
    justify-content: center;
  }

  .geoscene-popup--is-docked-top-right,
  .geoscene-popup--is-docked-bottom-right {
    justify-content: flex-end;
  }

  .geoscene-popup--is-docked-top-left .geoscene-popup__main-container,
  .geoscene-popup--is-docked-top-right .geoscene-popup__main-container,
  .geoscene-popup--is-docked-bottom-left .geoscene-popup__main-container,
  .geoscene-popup--is-docked-bottom-right .geoscene-popup__main-container {
    max-height: 80%;
  }

  .geoscene-popup--is-docked-top-center .geoscene-popup__main-container,
  .geoscene-popup--is-docked-bottom-center .geoscene-popup__main-container {
    max-height: 40%;
  }

  //  DOCKED
  ////////////////////
  ////////////////////
  //  RTL
  [dir="rtl"] {
    .geoscene-popup--is-docked-top-left,
    .geoscene-popup--is-docked-bottom-left {
      justify-content: flex-end;
    }

    .geoscene-popup--is-docked-top-right,
    .geoscene-popup--is-docked-bottom-right {
      justify-content: flex-start;
    }
  }

  //  RTL
  ////////////////////

  @media (prefers-reduced-motion) {
    .geoscene-popup--aligned-top-center,
    .geoscene-popup--aligned-top-left,
    .geoscene-popup--aligned-top-right,
    .geoscene-popup--aligned-bottom-center,
    .geoscene-popup--aligned-bottom-left,
    .geoscene-popup--aligned-bottom-right {
      animation: none;
    }
  }

  @media (prefers-reduced-motion) {
    .geoscene-popup--is-docked {
      animation: none;
    }
  }
}

@keyframes geoscene-docking-animation {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes popup-intro-animation-down {
  0% {
    transform: translate(0, -5px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes popup-intro-animation-up {
  0% {
    transform: translate(0, 5px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@if $include_Popup == true {
  @include popup();
}