.casa-area__courses-table {
    margin-top: clamp-calc(30px, 50px);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: #dee2e6;

    thead {
        @at-root .courses__calendar#{&} {
            display: none;

            @include desktop-small {
                display: table-row-group;
            }
        }

        tr {
            &.area-name {
                background-color: var(--casa-primary-color, #024b54) !important;
                color: #fff;
            }
        }

        th {
            padding: 0.5rem 0.5rem;
            text-align: left;
            width: 80px;

            @at-root .courses__table#{&}:nth-child(odd) {
                width: 56%;

                @include desktop-small {
                    width: 80px;
                }
            }

            @at-root .courses__table#{&}:nth-child(even) {
                text-align: right;

                @include desktop-small {
                    text-align: initial;
                }
            }
        }
    }

    tbody {
        tr {
            &.area-name {
                background-color: var(--casa-primary-color, #024b54) !important;
                color: #fff;

                td {
                    color: var(--casa-area-list-color, #fff);
                }
            }

            &:nth-child(odd) {
                background-color: #efefef;
            }

            @at-root .courses__calendar#{&} {
                display: block;

                @include desktop-small {
                    display: table-row;
                }
            }

            td {
                padding: 0.5rem 0.5rem;

                @at-root .courses__calendar#{&} {
                    display: block;
                    background-color: var(--bs-table-bg);
                    border-bottom-width: 1px;
                    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);

                    @include desktop-small {
                        display: table-cell;
                    }

                    &[data-label] {
                        text-align: right;

                        @include desktop-small {
                            text-align: initial;
                        }

                        &::before {
                            content: attr(data-label);
                            float: left;
                            font-weight: 500;

                            @include desktop-small {
                                content: none;
                            }
                        }
                    }
                }

                &.limited {
                    color: #ffc107;
                }

                &.bookable {
                    color: green;
                }

                &.sold {
                    color: #dc3545;
                }

                a {
                    text-decoration: unset;
                    color: var(--casa-primary-color, #024b54);

                    &:hover {
                        color: var(--casa-secondary-color, #04f59f);
                    }

                    &.limited {
                        color: #ffc107;
                    }

                    &.bookable {
                        color: green;
                    }

                    &.sold {
                        color: #dc3545;
                    }
                }

                @at-root .courses__table#{&}:nth-child(even) {
                    text-align: right;

                    @include desktop-small {
                        text-align: initial;
                    }
                }
            }
        }
    }
}