@import "/UI/Core/Styles/Theme.scss";

PopupPanel {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    min-width: 280px;
    max-width: 420px;
    transition: opacity 0.22s ease, transform 0.22s ease;
    opacity: 1;
    transform: translateY( 0 );
    pointer-events: none;

    &:intro {
        opacity: 0;
        transform: translateY( -12px );
    }

    &:outro {
        opacity: 0;
        transform: translateY( -12px );
    }

    &.death-popup {
        position: absolute;
        left: 50%;
        bottom: 72px;
        min-width: 360px;
        max-width: 560px;
        transform: translateX( -50% );

        &:intro {
            opacity: 0;
            transform: translateX( -50% ) translateY( 18px );
        }

        &:outro {
            opacity: 0;
            transform: translateX( -50% ) translateY( 18px );
        }

        .title,
        .text {
            text-align: center;
        }
    }

    .title {
        min-height: 8px;
        padding: 8px;
        font-size: 16px !important;

        * {
            font-size: 16px !important;
        }
    }

    .text {
        padding: 8px;
        font-size: 16px !important;

        * {
            font-size: 14px !important;
        }
    }
}