@import "/UI/Style.scss";

DeathScreen {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    font-family: $font-main;
    transition: transform 0.5s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 0;

    &.visible {
        opacity: 1;

        > .top {
            transform: translateY(0%);
        }

        > .bottom {
            transform: translateY(0%);
        }
    }

    > .container {
        width: 100%;
        height: 110px;
        background-color: $gray-darker;
        transition: transform 0.2s ease-in-out;
    }

    > .top {
        position: relative;
        justify-content: center;
        transform: translateY(-100%);
        height: 200px;

        > RespawnTimer {
            position: absolute;
            top: 100%;
            margin-top: 150px;
        }

        > .dead {
            position: absolute;
            top: 90%;
            padding: 0px 120px;
            background-color: $gray-darker;
            color: $red;
            font-size: 92px;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            gap: 80px;

            > p {
                white-space: nowrap;
            }

            > img {
                height: 80px;
                aspect-ratio: 1;
                background-size: 100%;
                background-position: center;
                background-repeat: no-repeat;
                transform: scale(2);
            }
        }
    }

    > .bottom {
        position: relative;
        justify-content: center;
        transform: translateY(100%);

        > PlayerInfo {
            position: absolute;
            top: -225px;

            * {
                flex-shrink: 0;
            }
        }

        > .message {
            position: absolute;
            bottom: 200px;
            flex-direction: row;
            font-size: 26px;
            justify-content: center;
            align-items: center;
            color: $smoke-gray;
            background-color: $gray-darker;
            gap: 8px;
            padding: 0px 40px;

            & .limb {
                color: $green;
            }

            > img {
                height: 80%;
                background-size: 100%;
                background-position: center;
                filter: border-wrap(darken($gray-darkerer, 0.8) 4px);
                transform: scale(0.8) rotate(-20deg);
            }
        }
    }
}