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

@property --color-sport-betting-odds-title {syntax: "<color>";inherits: true;initial-value: #ffffff}
@property --color-sport-betting-odds-title-bg {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-sport-betting-odds-headers {syntax: "<color>";inherits: true;initial-value: #DADCDE;}
@property --color-sport-betting-odds-item-odd {syntax: "<color>";inherits: true;initial-value: #F6F7F8;}
@property --color-sport-betting-odds-item-even {syntax: "<color>";inherits: true;initial-value: #EBECEC;}

.hierarchy-child, option[value*=-child] {
    font-weight: 700;
}

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

    width: 100%;

    .content {
        width: 100%;

        @include title;

        .odds {
            container-type: inline-size;

            .title {
                padding: 0.3rem;
                display: flex;
                justify-content: center;
                color: var(--color-sport-betting-odds-title);
                background-color: var(--color-sport-betting-odds-title-bg);
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;
            }

            .bettings-odds {
                display: flex;
                flex-direction: column;
                
                .odds-headers {
                    width: 100%;
                    display: flex;
                    background-color: var(--color-sport-betting-odds-headers);
                    padding: .2rem .5rem;

                    .name-team {
                        width: 100%;
                        text-align: center;

                        @container (max-width: 600px) {
                            & {
                                width: 50%;
                            }
                        }

                        @container (max-width: 320px) {
                            & {
                                width: 100%;
                                text-align: center;
                                display: none;
                            }
                        }
                    }

                    .stats {
                        display: flex;
                        min-width: 250px;
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        @container (max-width: 600px) {
                            & {
                                width: 50%;
                                min-width: inherit;
                            }
                        }

                        @container (max-width: 320px) {
                            & {
                                width: 100%;
                            }
                        }

                        .odd-spread {
                            width: 36%;
                        }

                        .odd-total {
                            width: 36%;
                        }

                        .odd-money {
                            width: 28%;
                        }
                    }
                }

                .odds-list {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .odd-item {
                        display: flex;
                        flex-direction: column;
                        padding: .3rem .5rem;
                        
                        &:nth-child(odd) {
                            background-color: var(--color-sport-betting-odds-item-odd);
                            
                        }

                        &:nth-child(even) {
                            background-color:var(--color-sport-betting-odds-item-even);
                        }

                        .team {
                            width: 100%;
                            display: flex;

                            @container (max-width: 320px) {
                                & {
                                    flex-direction: column;
                                }
                            }

                            .name-team {
                                width: 100%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;

                                @container (max-width: 600px) {
                                    & {
                                        width: 50%;
                                    }
                                }

                                @container (max-width: 320px) {
                                    & {
                                        width: 100%;
                                        text-align: center;
                                    }
                                }
                            }

                            .stats {
                                min-width: 250px;
                                display: flex;
                                text-align: center;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;

                                @container (max-width: 600px) {
                                    & {
                                        width: 50%;
                                        min-width: inherit;
                                    }
                                }

                                @container (max-width: 320px) {
                                    & {
                                        width: 100%;
                                    }
                                }

                                .odd-spread {
                                    width: 36%;
                                }

                                .odd-total {
                                    width: 36%;
                                }

                                .odd-money {
                                    width: 28%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-sport-betting-odds {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
