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

@property --color-rdg-pvm-bg {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --color-rdg-pvm-vs-bg {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-rdg-pvm-vs-p {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --color-rdg-pvm-btn-bg {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-rdg-pvm-btn-p {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --color-rdg-pvm-btn-hover {syntax: "<color>";inherits: true;initial-value: #014f8c;} 

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

    .pvm-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;

        .pick {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            border-radius: 8px;
            padding: 1rem;
            background-color: var(--color-rdg-pvm-bg);
            max-width: 25rem;
            width: 100%;

            .pick-header {
                display: flex;
                font-size: 14px;
                text-transform: uppercase;

                .sport, .date-time,.status {
                    flex: 1;
                    width: 100%;
                }
                .sport {
                    text-align: left;
                    font-weight: 700;
                }
                .date-time {
                    text-align: center;
                }
                .status {
                    text-align: right;
                    font-weight: 700;
                }
            }

            .pick-body {
                display: flex;
                align-items: center;

                .team {
                    flex: 2;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 700;
                    text-align: center;

                    .team-logo {
                        img {
                            aspect-ratio: 1/1;
                            object-fit: contain;
                            width: 90px;
                            width: 90px;

                            @media (max-width: $breakpoint-sm) {
                                width: 60px;
                                width: 60px;
                            }
                        }
                    }
                }

                .team-vs {
                    flex: 1;
                    display: grid;
                    place-content: center;
                    
                    .vs-logo {
                        background-color: var(--color-rdg-pvm-vs-bg);
                        padding: 5px 8px 8px;
                        color: var(--color-rdg-pvm-vs-p);
                        font-weight: 600;
                        font-size: 14px;
                        border-radius: 50%;
                        line-height: 100%
                    }
                }
            }

            .pick-footer {
                display: grid;
                place-content: center;
                font-size: 14px;
                font-weight: 600;

                .pick-btn {
                    background-color: var(--color-rdg-pvm-btn-bg);
                    color: var(--color-rdg-pvm-btn-p);
                    padding: 8px 16px;
                    border-radius: 6px;
                    text-align: center;
                    transition: all 0.3s ease;

                    &:hover {
                        background-color: var(--color-rdg-pvm-btn-hover);
                    }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-picks-vs-multi {
        &.full {
            width: 100% !important;
            position: initial !important;
            left: initial !important;
            right: initial !important;
            margin-left: initial !important;
            margin-right: initial !important;
            max-width: initial !important;
        }
    }
}
