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

@property --top-cappers-sport-title {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --top-cappers-sport-title-bg {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --top-cappers-sport-title-border {syntax: "<color>";inherits: true;initial-value: #3a96e0}
@property --top-cappers-sport-body {syntax: "<color>";inherits: true;initial-value: #F1F1F1}
@property --top-cappers-sport-logo-border {syntax: "<color>";inherits: true;initial-value: #CCC}
@property --top-cappers-sport-name {syntax: "<color>";inherits: true;initial-value: #111111}
@property --top-cappers-sport-score {syntax: "<color>";inherits: true;initial-value: #0160ac}
@property --top-cappers-sport-scores {syntax: "<color>";inherits: true;initial-value: #0160ac}
@property --top-cappers-sport-names {syntax: "<color>";inherits: true;initial-value: #111111}

.rdg-blocks .rdg-top-cappers-sport {
    .preview-thumbs {
        background-image: url('../images/rdg-top-cappers-sport-template-preview.jpg');
    }
    &.full-width {        
        position: relative;
    }

    &.none .container.content {
        padding-left: 0 !important;
        padding-right: 0 !important;

        .cappers .capper {
            width: 100% !important;

            .capper-body .logo {
                max-width: inherit !important;
            }
        }
    }

    .container.content {
        display: flex;
        flex-direction: column;

        @include title;

        .cappers {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
    
            .capper {
                display: flex;
                flex-direction: column;
                width: 18.5rem;
                height: fit-content;
                border-radius: .5rem;
                background-color: var(--top-cappers-sport-body);
    
                @media (max-width: 450px) {
                    & {
                        width: 100%;
                        min-width: initial;
                    }
                }
    
                .capper-header {
                    display: flex;
                    flex-direction: column;

                    .title {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        min-height: 2.5rem;
                        border-top-left-radius: .6rem;
                        border-top-right-radius: .6rem;
                        border-bottom: .24rem solid;
                        color: var(--top-cappers-sport-title);
                        padding: .3rem;
                        text-align: center;
                        background-color: var(--top-cappers-sport-title-bg);
                        border-color: var(--top-cappers-sport-title-border);
                    }
                }
    
                .capper-body {
                    display: flex;
                    flex-direction: column;
                    padding: 0 1rem .3rem 1rem;

                    .separator {
                        border-top: 1px solid var(--top-cappers-sport-logo-border);
                        min-height: 2rem;
                        padding: .4rem 0;
                    }

                    .logo {
                        display: flex;
                        justify-content: center;
                        max-width: 18rem;
                        max-height: 11rem;
                        margin: 1rem 0;

                        @media (max-width: 450px) {
                            & {
                                width: 100%;
                                max-width: 25rem;
                            }
                        }

                        img {
                            border-radius: 50%;
                            border: 4px solid var(--top-cappers-sport-logo-border);
                            width: 9rem;
                            height: 9rem;
                        }
                    }

                    .name {
                        display: flex;
                        justify-content: center;
                        padding-bottom: .5rem;
                        text-align: center;
                        color: var(--top-cappers-sport-name);
                    }

                    .score {
                        display: flex;
                        justify-content: center;
                        color: var(--top-cappers-sport-score);
                    }
    
                    .scores {
                        display: flex;
                        flex-direction: column;
                        text-align: center;

                        .score {
                            width: 100%;
                            display: flex;
                            gap: .5rem;
                            justify-content: space-between;

                            .score-name {
                                color: var(--top-cappers-sport-names);
                            }

                            .score-score {
                                color: var(--top-cappers-sport-scores);
                            }
                        }
                    }
                }
            }

            .capper-inline {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: fit-content;
                border-radius: .5rem;
                background-color: var(--color-white);
    
                @media (max-width: 450px) {
                    & {
                        width: 100%;
                        min-width: initial;
                    }
                }

                .separator {
                    border-top: 1px solid var(--top-cappers-sport-logo-border);
                    min-height: 2rem;
                    padding: .2rem 0;
                }
       
                .capper-body {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    padding: 0 1rem .1rem 1rem;

                    .logo {
                        display: flex;
                        align-items: center;
                        max-width: 9rem;
                        max-height: 9rem;
                        margin: 1rem 0;
                        border-radius: 50%;

                        @media (max-width: 450px) {
                            & {
                                width: 100%;
                                max-width: 25rem;
                            }
                        }

                        img {
                            border-radius: 50%;
                            width: 5rem;
                            height: 5rem;
                        }
                    }

                    .capper-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-left: .6rem;
                        gap: .1rem;

                        .name {
                            color: var(--color-primary-dark);
                            margin-bottom: 0px;
                        }
    
                        .package {
                            color: var(--color-primary);
                            margin-bottom: 0px;                            
                        }

                        .profit {
                            color: var(--color-gray-100);
                            margin-bottom: 0px;
                        }
                      }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-top-cappers-sport {
        &.full-width {
            width: 100% !important;
            position: initial !important;
            left: initial !important;
            right: initial !important;
            margin-left: initial !important;
            margin-right: initial !important;
            max-width: initial !important;
        }
    }
}
