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

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

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

    &.full-width {
        width: calc(var(--vw, 1vw) * 100) !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: 99.55vw;
    }

    &.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 {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;

        @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-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-title);
                        padding: .3rem;
                        text-align: center;
                        background-color: var(--top-cappers-title-bg);
                        border-color: var(--top-cappers-title-border);
                    }
                }
    
                .capper-body {
                    display: flex;
                    flex-direction: column;
                    padding: 0 1rem .3rem 1rem;

                    .separator {
                        border-top: 1px solid var(--top-cappers-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-logo-border);
                            width: 9rem;
                            height: 9rem;
                        }
                    }

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

                    .score {
                        display: flex;
                        justify-content: center;
                        color: var(--top-cappers-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-names);
                            }

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

.acf-block-preview {
    .rdg-top-cappers {
        &.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;
        }
    }
}
