@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: 160px;
        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;
        color: white;
        text-stroke-width: 2px;

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

    .text {
        padding: 6px 10px;
        font-size: 13px !important;
        color: white;
        text-stroke-width: 2px;

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

    &.client-authored {
        border: 2px solid;
        border-color: rgba( 255, 80, 80, 0.85 );
        background-color: rgba( 40, 10, 10, 0.55 );
    }

    .client-badge {
        position: absolute;
        top: 4px;
        right: 6px;
        padding: 1px 6px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        color: white;
        background-color: rgba( 180, 40, 40, 0.95 );
        border-radius: 3px;
        z-index: 2;
    }
}