MessagePanel {
    position: absolute;
    //min-width: 60%;
    height: 60px;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    //background-color: #00000088;
    flex-direction: row;
    padding: 8px;
    backdrop-filter: blur(5px);
    //transition: bottom 0.25s ease-out, transform 0.25s ease-out, opacity 0.25s ease-out;
    transition: all 0.25s ease-out;

    .message {
        font-size: 24px;
        color: #ffffffee;
    }

    .icon {
        width: 55px;
        height: 55px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }

    &.depth-0 {
        transform: scale(1);
        bottom: 10px;
        z-index: 0;
    }

    &.depth-1 {
        transform: scale(0.8);
        bottom: 50px;
        z-index: -3;
    }

    &.depth-2 {
        transform: scale(0.6);
        bottom: 90px;
        z-index: -6;
    }

    &.depth-3 {
        transform: scale(0.5);
        bottom: 110px;
        z-index: -9;
    }

    &.depth-4 {
        transform: scale(0.4);
        bottom: 140px;
        z-index: -12;
    }
}