@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);
            }
        }
    }
}
