/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../inputs/variables";
@import "../z-index";

.core-popup {
 top: 0;
 left: 0;
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 4px;
 border: 1px solid $buic-background-panel-stroke;
 background: $buic-background-panel;
 color: $buic-text-color;
 animation-duration: .2s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 cursor: default;

 @include uicore-z-index(dialog-popup);

 &.core-popup-animation-none {
  animation-duration: 0s;
 }
}

.core-popup.arrow::after, .core-popup.arrow::before {
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 color: $buic-background-panel;
}

.core-popup.core-popup-bottom-left.arrow::after,
.core-popup.core-popup-bottom-left.arrow::before {
 bottom: 100%;
 left: 25%;
}

.core-popup.core-popup-bottom-right.arrow::after,
.core-popup.core-popup-bottom-right.arrow::before {
 bottom: 100%;
 left: 75%;
}

.core-popup.core-popup-bottom.arrow::after,
.core-popup.core-popup-bottom.arrow::before {
 bottom: 100%;
 left: 50%;
}

.core-popup.core-popup-top.arrow::after,
.core-popup.core-popup-top.arrow::before {
 top: 100%;
 left: 50%;
}

.core-popup.core-popup-top-left.arrow::after,
.core-popup.core-popup-top-left.arrow::before {
 top: 100%;
 left: 25%;
}

.core-popup.core-popup-top-right.arrow::after,
.core-popup.core-popup-top-right.arrow::before {
 top: 100%;
 left: 75%;
}

.core-popup.core-popup-left.arrow::after,
.core-popup.core-popup-left.arrow::before {
 top: 50%;
 left: 100%;
}

.core-popup.core-popup-right.arrow::after,
.core-popup.core-popup-right.arrow::before {
 top: 50%;
 right: 100%;
}

.core-popup.core-popup-bottom.arrow::before,
.core-popup.core-popup-bottom-left.arrow::before,
.core-popup.core-popup-bottom-right.arrow::before {
 border-bottom-color: inherit;
 border-width: 9px;
 margin-left: -9px;
}

.core-popup.core-popup-top.arrow::before,
.core-popup.core-popup-top-left.arrow::before,
.core-popup.core-popup-top-right.arrow::before {
 border-top-color: inherit;
 border-width: 9px;
 margin-left: -9px;
}

.core-popup.core-popup-left.arrow::before {
 border-left-color: inherit;
 border-width: 9px;
 margin-top: -9px;
}

.core-popup.core-popup-right.arrow::before {
 border-right-color: inherit;
 border-width: 9px;
 margin-top: -9px;
}

.core-popup.core-popup-bottom.arrow::after,
.core-popup.core-popup-bottom-left.arrow::after,
.core-popup.core-popup-bottom-right.arrow::after {
 border-bottom-color: currentColor;
 border-width: 8px;
 margin-left: -8px;
}

.core-popup.core-popup-top.arrow::after,
.core-popup.core-popup-top-left.arrow::after,
.core-popup.core-popup-top-right.arrow::after {
 border-top-color: currentColor;
 border-width: 8px;
 margin-left: -8px;
}

.core-popup.core-popup-left.arrow::after {
 border-left-color: currentColor;
 border-width: 8px;
 margin-top: -8px;
}

.core-popup.core-popup-right.arrow::after {
 border-right-color: currentColor;
 border-width: 8px;
 margin-top: -8px;
}

.core-popup-shadow {
 -webkit-box-shadow: 0 3px 6px $buic-popup-boxshadow;
 box-shadow: 0px 3px 6px $buic-popup-boxshadow;
 background-clip: padding-box;
}

.core-popup-top-left {
 transform-origin: left bottom 0px;
 animation-name: animate-corner;
}

.core-popup-top-right {
 transform-origin: right bottom 0px;
 animation-name: animate-corner;
}

.core-popup-bottom-left {
 transform-origin: left top 0px;
 animation-name: animate-corner;
}

.core-popup-bottom-right {
 transform-origin: right top 0px;
 animation-name: animate-corner;
}

.core-popup-left {
 transform-origin: right;
 animation-name: animate-horizontal;
}

.core-popup-left-top {
  transform-origin: right top 0px;
  animation-name: animate-corner;
 }

.core-popup-right {
 transform-origin: left;
 animation-name: animate-horizontal;
}

.core-popup-right-top {
  transform-origin: left top 0px;
  animation-name: animate-corner;
}

.core-popup-top {
 transform-origin: bottom;
 animation-name: animate-vertical;
};

.core-popup-bottom {
 transform-origin: top;
 animation-name: animate-vertical;
}

@keyframes animate-vertical {
 from {
   visibility: hidden;
   transform: scale(1,.5);
 }
 to {
   visibility: visible;
   transform: scale(1);
 }
}

@keyframes animate-corner {
 from {
   visibility: hidden;
   transform: scale(.5,.5);
 }
 to {
   visibility: visible;
   transform: scale(1,1);
 }
}

@keyframes animate-horizontal {
 from {
   visibility: hidden;
   transform: scale(.5,1);
 }
 to {
   visibility: visible;
   transform: scale(1,1);
 }
}