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

.rdg-blocks .rdg-next-game {
    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);

                        @media (max-width: $breakpoint-lg) {
                            & {
                                font-size: .9rem;
                            }
                        }
                    }

                    .details-name {
                        font-weight: bold;
                        color: var(--color-next-game-name);

                        @media (max-width: $breakpoint-lg) {
                            & {
                                font-size: 1.5rem;
                            }
                        }
                    }

                    .details-score {
                        font-weight: 700;
                        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 {
                        font-weight: 700;

                        &: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-gray-line);
                    border-bottom: 1px solid var(--color-gray-line);
                }
            }

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

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

            .channel {
                font-weight: 600;
                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);

                        @media (max-width: $breakpoint-lg) {
                            & {
                                font-size: .9rem;
                            }
                        }
                    }

                    .details-name {
                        font-weight: bold;
                        color: var(--color-next-game-name);

                        @media (max-width: $breakpoint-lg) {
                            & {
                                font-size: 1.5rem;
                            }
                        }
                    }

                    .details-score {
                        font-weight: 700;
                        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 {
                        font-weight: 700;

                        &: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-gray-line);
                border-bottom: 1px solid var(--color-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-gray-line);
                    border-bottom: 1px solid var(--color-gray-line);
                }
            }

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

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

            .channel {
                font-weight: 600;
                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-gray-line);
            }
        }

        span {
            font-weight: 700;

            &: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;
            }
        }

        a {
            margin-top: 1rem;
            padding: .8rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-white);
            border-radius: .4rem;
            min-width: 10rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out;
            
            &.link-success {
                background-color: var(--color-success);
                border-top: 3px solid var(--color-success-light);
            }

            &.link-warning {
                background-color: var(--color-warning);
                border-top: 3px solid var(--color-warning-light);
            }

            &.link-danger {
                background-color: var(--color-danger);
                border-top: 3px solid var(--color-danger-light);
            }

            &.link-default {
                color: var(--color-primary);
                background-color: var(--color-gray);
                border: 2px solid var(--color-primary);
            }

            &:last-of-type {
                @media (max-width: 350px) {
                    & {
                        margin-top: 0;
                    }
                }
            }
        }
    }
}

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

        .buttons {
            a {
                text-decoration: none;
            }
        }
    }
}
