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

PopupPanel {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    min-width: 250px;
    max-width: 340px;
    max-height: 220px;
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease, margin-top 0.22s ease, margin-bottom 0.22s ease;
    opacity: 1;
    transform: translateY( 0 );
    pointer-events: none;

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

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

    &.pruning {
        opacity: 0;
        transform: translateY( -6px );
        max-height: 0;
        margin-top: -8px;
    }

    &.death-popup {
        position: absolute;
        left: 50%;
        bottom: 114px;
        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: 10px;
        padding: 6px 10px;
        font-size: 14px !important;

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

    .text {
        padding: 6px 10px;
        font-size: 13px !important;

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