@import '/UI/Style.scss';

TeamSidePanel {
    position: relative;
    flex-grow: 1;
    font-family: $font-main;
    color: $white;
    transition: all 0.2s ease-in-out;

    &.selected {
        >.header {
            filter: brightness(1.2);
        }

        >.gradient {
            opacity: 1.5;
        }

        >.soldier {
            transform: translateY(-20px);
            filter: brightness(100%);
        }
    }

    &:hover {
        cursor: pointer;

        &:not(.selected) {
            >.header {
                filter: brightness(1.1);
            }

            >.gradient {
                opacity: 1.4;
            }

            >.soldier {
                transform: translateY(-10px);
                filter: brightness(75%);
            }
        }
    }

    &:active {
        sound-in: 'light_click';
    }

    &.flipped {
        >.header {
            justify-content: flex-end;

            >.text-container {
                align-items: flex-start;

                >.player-count {
                    flex-direction: row-reverse;

                    >TeamDots {
                        flex-direction: row;
                    }
                }
            }
        }

        >.soldier {
            left: 0px;
        }
    }

    >.gradient {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: opacity 0.2s ease-in-out;
    }

    >.soldier {
        transition: all 0.2s ease-in-out;
        position: absolute;
        right: 0px;
        top: 20px;
        width: 60%;
        height: 80%;
        background-image: url(ui/teamselect/soldier_pose_1.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        filter: brightness(25%);

        &.with-mask {
            mask-image: url(ui/teamselect/soldier_pose_1_mask.png);
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
        }

        &.second-pose {
            background-image: url(ui/teamselect/soldier_pose_2.png);

            &.with-mask {
                mask-image: url(ui/teamselect/soldier_pose_2_mask.png);
            }
        }
    }

    >.header {
        position: absolute;
        width: 100%;
        top: 130px;
        padding: 30px 0px;
        background-color: rgba(black, 0.8);
        text-transform: uppercase;
        align-items: center;
        transition: all 0.2s ease-in-out;
        filter: brightness(0.7);

        >.text-container {
            flex-direction: column;
            width: 40%;
            align-items: flex-end;

            >p {
                font-size: 42px;
                margin-bottom: -20px;

                &.title {
                    font-size: 82px;
                }
            }

            >.player-count {
                flex-direction: row;
                margin-top: 5px;
                gap: 20px;
                align-items: center;
            }
        }
    }
}