@property --color-rdg-team-schedules-title {syntax: "<color>";inherits: true;initial-value: #031C3F;}
@property --color-rdg-team-schedules-title-border {syntax: "<color>";inherits: true;initial-value: #efeeec;}
@property --color-rdg-team-schedules-border {syntax: "<color>";inherits: true;initial-value: #ffffff;}
@property --color-rdg-team-schedules-header {syntax: "<color>";inherits: true;initial-value: #ffffff;}
@property --color-rdg-team-schedules-header-bg {syntax: "<color>";inherits: true;initial-value: #031C3F;}
@property --color-rdg-team-schedules-td {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-rdg-team-schedules-td-bg {syntax: "<color>";inherits: true;initial-value: #efeeec;}
@property --color-rdg-team-schedules-td-first {syntax: "<color>";inherits: true;initial-value: #ffffff;}
@property --color-rdg-team-schedules-td-first-bg {syntax: "<color>";inherits: true;initial-value: #7f8b90;}

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

        .title {
            color: var(--color-rdg-team-schedules-title);
            border-bottom: var(--color-rdg-team-schedules-title-border) 2px solid;
            margin-bottom: 0.5rem;
            padding-bottom: 0.25rem;
        }

        table {
            border: none !important;
            text-align: center;

            thead {
                tr {
                    th {
                        border: none;
                        color: var(--color-rdg-team-schedules-header);
                        background: var(--color-rdg-team-schedules-header-bg);
                    }

                    th:first-of-type {
                        border-left: 2px solid var(--color-rdg-team-schedules-border);
                    }

                    th:last-of-type {
                        border-right: 2px solid var(--color-rdg-team-schedules-border);
                    }
                }
            }

            @media (max-width: 600px) {
                thead {
                    display: none;
                }
            }

            tbody {
                tr {
                    td {
                        padding: 1rem !important;
                        background: var(--color-rdg-team-schedules-td-bg);
                        color: var(--color-rdg-team-schedules-td);
                        border: 2px solid var(--color-rdg-team-schedules-border) !important;

                        span {
                            display: none;
                        }
                    }

                    td:first-of-type {
                        background: var(--color-rdg-team-schedules-td-first-bg);
                        color: var(--color-rdg-team-schedules-td-first);
                    }

                    @media (max-width: 600px) {
                        td {
                            span {
                                display: block;
                            }
                        }

                        td:nth-of-type(n+2) {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
