@use 'sass:math';

.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: solid transparent;
    }

    &:before {
        border: solid transparent;
    }
}