@use "sass:math";

// core
.p-overlaypanel {
  margin-top: 10px;
}

.p-overlaypanel-flipped {
  margin-top: -10px;
  margin-bottom: 10px;
}

.p-overlaypanel-close {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Animation */
.p-overlaypanel-enter-from {
  opacity: 0;
  transform: scaleY(0.8);
}

.p-overlaypanel-leave-to {
  opacity: 0;
}

.p-overlaypanel-enter-active {
  transition:
    transform 0.12s cubic-bezier(0, 0, 0.2, 1),
    opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}

.p-overlaypanel-leave-active {
  transition: opacity 0.1s linear;
}

.p-overlaypanel:after,
.p-overlaypanel:before {
  bottom: 100%;
  left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.p-overlaypanel:after {
  border-width: 8px;
  margin-left: -8px;
}

.p-overlaypanel:before {
  border-width: 10px;
  margin-left: -10px;
}

.p-overlaypanel-flipped:after,
.p-overlaypanel-flipped:before {
  bottom: auto;
  top: 100%;
}

.p-overlaypanel.p-overlaypanel-flipped:after {
  border-bottom-color: transparent;
}

.p-overlaypanel.p-overlaypanel-flipped:before {
  border-bottom-color: transparent;
}

// theme
.p-overlaypanel {
  background: $overlayContentBg;
  color: $panelContentTextColor;
  border: $overlayContentBorder;
  border-radius: $borderRadius;
  box-shadow: $overlayContainerShadow;

  .p-overlaypanel-content {
    padding: $panelContentPadding;
  }

  .p-overlaypanel-close {
    background: $buttonBg;
    color: $buttonTextColor;
    width: $actionIconWidth;
    height: $actionIconHeight;
    transition: $actionIconTransition;
    border-radius: $actionIconBorderRadius;
    position: absolute;
    top: math.div(-1 * $actionIconWidth, 2);
    right: math.div(-1 * $actionIconWidth, 2);

    &:enabled:hover {
      background: $buttonHoverBg;
      color: $buttonTextHoverColor;
    }
  }

  &:after {
    border-style: solid;
    border-color: rgba($overlayContentBg, 0);
    border-bottom-color: $overlayContentBg;
  }

  &:before {
    border-style: solid;

    @if (nth($overlayContentBorder, 2) == "none") {
      border-color: rgba($overlayContentBg, 0);
      border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
    } @else {
      border-color: rgba(nth($overlayContentBorder, 3), 0);
      border-bottom-color: scale-color(
        nth($overlayContentBorder, 3),
        $lightness: -5%
      );
    }
  }

  &.p-overlaypanel-flipped {
    &:after {
      border-top-color: $overlayContentBg;
    }

    &:before {
      @if (nth($overlayContentBorder, 2) == "none") {
        border-top-color: $overlayContentBg;
      } @else {
        border-top-color: nth($overlayContentBorder, 3);
      }
    }
  }
}