@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

@property --color-next-game-name {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-next-game-score {syntax: "<color>";inherits: true;initial-value: #3a96e0;}
@property --color-next-game-date {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-next-game-hour {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-next-game-channel {syntax: "<color>";inherits: true;initial-value: #555;}
@property --color-next-game-cin {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-next-game-border {syntax: "<color>";inherits: true;initial-value: #CCC;}
@property --color-next-game-gray-line {syntax: "<color>";inherits: true;initial-value: #CCC;}

.rdg-blocks .rdg-next-game {
    .preview-thumbs {
        background-image: url('../images/rdg-next-game-template-preview.jpg');
    }

    width: calc(var(--vw, 1vw) * 100);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 99.55vw;

    @include title;
    
    .teams {
        display: flex;
        justify-content: space-evenly;

        @media (max-width: 390px) {
            & {
                flex-direction: column;
            }
        }

        .home-team {
            width: 41%;

            @media (max-width: $breakpoint-md) {
                & {
                    width: 100%;
                }
            }

            @media (max-width: $breakpoint-sm) {
                & {
                    padding-bottom: 1rem;
                }
            }

            .home-group {
                width: 100%;
                display: flex;

                @media (max-width: $breakpoint-md) {
                    & {
                        flex-direction: column-reverse;
                    }
                }

                .home-details {
                    width: 70%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: center;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 60%;
                        }
                    }

                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            align-items: center;
                        }
                    }

                    p {
                        margin: 0;
                    }

                    .details-city {
                        color: var(--color-next-game-name);
                    }

                    .details-name {
                        color: var(--color-next-game-name);
                    }

                    .details-score {
                        color: var(--color-next-game-score);
                    }
                }

                .home-logo {
                    width: 30%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: .5rem .5rem .5rem 1rem;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 40%;
                        }
                    }

                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            padding-bottom: 1rem;
                            justify-content: center;
                        }
                    }

                    img {
                        max-height: 7rem;
                    }
                }
            }

            .home-stat {
                width: 100%;
                display: flex;
                justify-content: center;
    
                .stat-details {
                    width: 70%;
    
                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 60%;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            display: none;
                        }
                    }
                }
    
                .stat-logo {
                    width: 30%;
                    display: flex;
                    padding-left: 1rem;

                    span {

                        &:first-of-type {
                            margin-right: .5rem;
                        }
                    }
    
                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 40%;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            padding-left: 0;
                            justify-content: center;
                        }
                    }
                }
            }
        }

        .date-hour {
            width: 18%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            text-align: center;

            @media (max-width: $breakpoint-md) {
                & {
                    width: 100%;
                    padding: 1rem 0;
                }
            }

            @media (max-width: $breakpoint-sm) {
                & {
                    display: none;
                }
            }

            @media (max-width: 390px) {
                & {
                    display: inherit;
                    border-top: 1px solid var(--color-next-game-border);
                    border-bottom: 1px solid var(--color-next-game-border);
                }
            }

            .date {
                color: var(--color-next-game-date);
            }

            .hour {
                color: var(--color-next-game-hour);
            }

            .channel {
                color: var(--color-next-game-channel);
            }
        }

        .visitor-team {
            width: 41%;

            @media (max-width: $breakpoint-md) {
                & {
                    width: 100%;
                }
            }
            
            .visitor-group {
                width: 100%;
                display: flex;

                @media (max-width: $breakpoint-md) {
                    & {
                        flex-direction: column;
                    }
                }

                @media (max-width: $breakpoint-sm) {
                    & {
                        padding-bottom: 0;
                        padding-top: .5rem;
                    }
                }

                .visitor-logo {
                    width: 30%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding: .5rem 1rem .5rem .5rem;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 40%;
                        }
                    }

                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            padding-bottom: 1rem;
                            justify-content: center;
                        }
                    }

                    img {
                        max-height: 7rem;
                    }
                }

                .visitor-details {
                    width: 70%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;

                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 60%;
                        }
                    }

                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            align-items: center;
                        }
                    }

                    p {
                        margin: 0;
                    }

                    .details-city {
                        color: var(--color-next-game-name);
                    }

                    .details-name {
                        color: var(--color-next-game-name);
                    }

                    .details-score {
                        color: var(--color-next-game-score);
                    }
                }
            }

            .visitor-stat {
                width: 100%;
                display: flex;
                justify-content: center;

                .stat-logo {
                    width: 30%;
                    display: flex;
                    padding-right: 1rem;
                    justify-content: end;

                    span {

                        &:first-of-type {
                            margin-right: .5rem;
                        }
                    }
    
                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 40%;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            width: 100%;
                            padding-right: 0;
                            justify-content: center;
                        }
                    }
                }
    
                .stat-details {
                    width: 70%;
    
                    @media (max-width: $breakpoint-lg) {
                        & {
                            width: 60%;
                        }
                    }
    
                    @media (max-width: $breakpoint-md) {
                        & {
                            display: none;
                        }
                    }
                }
            }
        }

        .color-success {
            color: var(--color-success);
        }

        .color-warning {
            color: var(--color-warning);
        }

        .color-danger {
            color: var(--color-danger);
        }
    }

    .teams-date {
        display: none;

        @media (max-width: $breakpoint-sm) {
            & {
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;
                border-top: 1px solid var(--color-next-game-gray-line);
                border-bottom: 1px solid var(--color-next-game-gray-line);
            }
        }

        @media (max-width: 390px) {
            & {
                display: none;
            }
        }

        .date-hour {
            width: 18%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            text-align: center;

            @media (max-width: $breakpoint-md) {
                & {
                    width: 100%;
                    padding: 1rem 0;
                }
            }

            @media (max-width: 390px) {
                & {
                    border-top: 1px solid var(--color-next-game-gray-line);
                    border-bottom: 1px solid var(--color-next-game-gray-line);
                }
            }

            .date {
                color: var(--color-next-game-date);
            }

            .hour {
                color: var(--color-next-game-hour);
            }

            .channel {
                color: var(--color-next-game-channel);
            }
        }
    }

    .cin {
        display: flex;
        justify-content: center;
        margin-top: .5rem;
        color: var(--color-next-game-cin);

        @media (max-width: 390px) {
            & {
                padding-top: .5rem;
                border-top: 1px solid var(--color-next-game-gray-line);
            }
        }

        span {

            &:first-of-type {
                margin-right: .5rem;
            }

            &:last-of-type {
                margin-right: .5rem;
            }
        }
    }

    .buttons {
        padding-top: 1rem;
        display: flex;
        justify-content: center;
        gap: 1rem;

        @media (max-width: 350px) {
            & {
                flex-direction: column;
            }
        }

        @include buttons-links;
    }
}

.acf-block-preview {
    .rdg-next-game {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
