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

.core-popup {
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: var(--iui-border-radius-1);
  border: 1px solid var(--iui-color-border);
  background: var(--iui-color-background);
  color: var(--iui-color-text);
  animation-duration: var(--iui-duration-1);
  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-hidden {
    display: none;
  }

  &.core-animation-ended {
    animation-name: none;
  }
}

.core-popup.arrow::after,
.core-popup.arrow::before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  color: var(--iui-color-background);
}

.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: var(--iui-shadow-4);
  box-shadow: var(--iui-shadow-4);
  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, 0.5);
  }
  to {
    visibility: visible;
    transform: scale(1);
  }
}

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

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