@property --color-top-sites-box-shadow-1  {syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .15);}
@property --color-top-sites-box-shadow-2  {syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, .075);}
@property --color-top-sites-card-bg  {syntax: "<color>"; inherits: true; initial-value: #f2f2f2;}
@property --color-top-sites-card-header  {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-header-bg  {syntax: "<color>"; inherits: true; initial-value: #3061ac;}
@property --color-top-sites-card-header-border  {syntax: "<color>"; inherits: true; initial-value: #4c96e0;}
@property --color-top-sites-card-content-table-td-a  {syntax: "<color>"; inherits: true; initial-value: #3061ad;}
@property --color-top-sites-card-content-table-td-a-bg  {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-content-table-td-a-border  {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-content-table-td-a-hover  {syntax: "<color>"; inherits: true; initial-value: #222222;}
@property --color-top-sites-card-content-table-td-a-hover-bg  {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-content-table-td-a-hover-border  {syntax: "<color>"; inherits: true; initial-value: #0160ac;}
@property --color-top-sites-card-content-table-td-border  {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-footer-a {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-top-sites-card-footer-a-bg  {syntax: "<color>"; inherits: true; initial-value: #5abd0a;}
@property --color-top-sites-card-footer-a-border  {syntax: "<color>"; inherits: true; initial-value: #68f96e;}
@property --color-top-sites-card-footer-a-hover  {syntax: "<color>"; inherits: true; initial-value: #244d0e;}
@property --color-top-sites-card-footer-a-hover-bg  {syntax: "<color>"; inherits: true; initial-value: #5abd0a;}
@property --color-top-sites-card-footer-a-hover-border  {syntax: "<color>"; inherits: true; initial-value: #244d0e;}

.rdg-blocks {
    .rdg-top-sites {
        .rdg-top-sites-card {
            background: var(--color-top-sites-card-bg);
            border-radius: .5rem;
            box-shadow: inset 0 1px 0 var(--color-top-sites-box-shadow-1), 0 1px 1px var(--color-top-sites-box-shadow-2);
            overflow: hidden;
            text-align: center;

            .card-header {
                background: var(--color-top-sites-card-header-bg);
                border-bottom: 4px solid var(--color-top-sites-card-header-border);
                color: var(--color-top-sites-card-header);
                padding: .5rem;

                h5 {
                    margin: 0;
                }
            }

            .card-content {
                table, tr, th, td {
                    border: none;
                }

                table {
                    margin: 0;
                    padding: 0 .25rem;

                    tr {
                        display: flex;

                        td {
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            padding: .5rem .25rem;

                            a {
                                background-color: var(--color-top-sites-card-content-table-td-a-bg);
                                border-top: 2px solid var(--color-top-sites-card-content-table-td-a-border);
                                border-radius: .25rem;
                                box-shadow: inset 0 1px 0 var(--color-top-sites-box-shadow-1), 0 1px 1px var(--color-top-sites-box-shadow-2);
                                color: var(--color-top-sites-card-content-table-td-a);
                                display: inline-block;
                                min-width: 70px;
                                padding: .25rem .5rem;
                                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;
                            }

                            a:hover {
                                background-color: var(--color-top-sites-card-content-table-td-a-hover-bg);
                                border-color: var(--color-top-sites-card-content-table-td-a-hover-border);
                                color: var(--color-top-sites-card-content-table-td-a-hover);
                            }
                        }

                        td:nth-of-type(1) {
                            width: 30%;
                        }

                        td:nth-of-type(2) {
                            width: 40%;
                        }

                        td:nth-of-type(3) {
                            width: 30%;
                        }
                    }

                    tr:not(:last-of-type) {
                        td {
                            border-bottom: 2px solid var(--color-top-sites-card-content-table-td-border);
                        }
                    }
                }
            }

            .card-footer {
                padding: 0 1rem;

                a {
                    background-color: var(--color-top-sites-card-footer-a-bg);
                    border-radius: .25rem;
                    border-top: 2px solid var(--color-top-sites-card-footer-a-border);
                    box-shadow: inset 0 1px 0 var(--color-top-sites-box-shadow-1), 0 1px 1px var(--color-top-sites-box-shadow-2);
                    color: var(--color-top-sites-card-footer-a);
                    display: inline-block;
                    margin: .5rem 0 .75rem;
                    min-width: 150px;
                    padding: .25rem .5rem;
                    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;
                }

                a:hover {
                    background-color: var(--color-top-sites-card-footer-a-hover-bg);
                    border-color: var(--color-top-sites-card-footer-a-hover-border);
                    color: var(--color-top-sites-card-footer-a-hover);
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-top-sites {
        a {
            text-decoration: none !important;
        }
    }
}
