@use '../../source/scss/theme/global/config' as *;
@use '../../source/scss/theme/functions/functions' as *;
@use '../../source/scss/theme/functions/mixins' as *;

$rooster-border: #FFEBFE;
$rooster-month-bg: rgba($primary, 0.06);

.rooster {
    position: relative;

    h2 {
        margin-bottom: rem-calc(36);
    }

    &__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid $rooster-border;
        border-radius: rem-calc(12);
        background-color: $color-white;
    }

    &__table {
        width: 100%;
        min-width: rem-calc(320);

        thead {
            th {
                padding: rem-calc(16 24);
                text-align: left;
                font-family: $headings-font-family;
                font-size: rem-calc(16);
                font-weight: $headings-font-weight;
                line-height: 1.35;
                color: $headings-color;
                background-color: $color-white;
                border-bottom: 1px solid $rooster-border;

                &:first-child {
                    width: 50%;
                }
            }
        }

        tbody {
            tr {
                border-bottom: 1px solid $rooster-border;

                &:last-child {
                    border-bottom: none;
                }
            }

            td,
            th {
                padding: rem-calc(14 24);
                font-size: rem-calc(16);
                line-height: 1.4;
                color: $text-color;
                vertical-align: middle;
            }

            td:first-child {
                font-weight: 600;
                color: $headings-color;
            }
        }
    }

    &__month {
        th {
            padding: rem-calc(12 24);
            text-align: left;
            font-family: $headings-font-family;
            font-size: rem-calc(15);
            font-weight: $headings-font-weight;
            text-transform: capitalize;
            color: $primary;
            background-color: $rooster-month-bg;
            border-bottom: 1px solid $rooster-border;
        }
    }

    &__disclaimer {
        margin: rem-calc(20 0 0);
        font-size: rem-calc(14);
        line-height: 1.5;
        color: rgba($text-color, 0.75);
        font-style: italic;
    }

    &:last-of-type {
        margin-bottom: 0;

        @include tablet {
            margin-bottom: 2.5rem;
        }

        @include desktop {
            margin-bottom: 7.5rem;
        }
    }
}