@import "/UI/Styles/styles.scss";

PlayPhase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: $font-primary;
    color: $text-primary-color;
    font-weight: bold;

    .timer {
        position: absolute;
        top: 110px;
        font-size: 20px;
        text-stroke: 6px black;
    }

    .start-timer {
        position: absolute;
        font-size: 60px;
        text-stroke: 6px black;
    }

    .player-progress {
        position: absolute;
        top: 20px;
        width: 60%;
        height: 60px;
        justify-content: center;
        align-items: flex-start;
        font-size: 64px;
        gap: 10px;

        .icon {
            font-family: Material Icons;
            font-size: 34px;
            text-stroke: 6px black;

            &.dead {
                font-size: 74px;
                position: absolute;
                z-index: 1;
                top: 14px;
                color: red;
            }

            &.winner {
                font-size: 54px;
                position: absolute;
                z-index: 1;
                top: 24px;
                color: yellow;
            }
        }

        .bar {
            width: 100%;
            height: 14px;
            background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55%, rgba(180,180,180,1) 50%);
            margin-top: 10px;
            border: 2px solid black;
            border-radius: 4px;

            .player {
                position: absolute;
                left: 20px;
                height: 70px;
                width: 50px;
                margin-top: 10px;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .player_icon {
                    width: 40px;
                    aspect-ratio: 1;
                    filter: border-wrap(2px, black);

                    &.dead {
                        filter: saturate(0);
                    }
                }
            }
        }
    }

    .spectator-info {
        position: absolute;
        bottom: 40px;
        font-weight: bold;
        font-family: $font-primary;
        font-size: 28px;
        color: white;
        text-stroke: 8px black;
    }

    .controls {
        position: absolute;
        right: 40px;
        bottom: 40px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        font-weight: bold;
        font-family: $font-primary;
        font-size: 28px;
        color: white;
        gap: 10px;

        .control {
            flex-direction: row;
            align-items: center;
            gap: 20px;
            position: relative;

            .cover {
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 8px;
                background-color: rgba(0, 0, 0, 0.6);
            }
        }

        .text {
            text-stroke: 8px black;
            z-index: 10;
        }
    }

    inputglyph {
        background-size: contain;
        background-color: rgba(0,0,0, 0.8);
        border-radius: 12px;
        width: 60px;
        height: 60px;

        &.pressed {
            transform: scale(0.85);
            opacity: 0.8;
        }
    }
}