/**
* Table/Calendar showing item availabilities.
*
* shortcode [cb_item_table]
* 
*
* @package   CommonsBooking
* @author    Florian Egermann <florian@wielebenwir.de>
* @license   GPL-2.0+
* @since     2.0
* @link      http://www.wielebenwir.de
* @copyright 2020 wielebenwir
*/

@use '../../../global/sass/partials/variables';
@use '../../../global/sass/partials/extends';
@use '../../../public/sass/mixins/calendar';

.cb-table-scroll {
    position: relative;
    overflow: scroll;
}

.cb-items-table {
    @extend .cb-box;
    overflow: auto; /* overwriting cb-box standard behaviour */
    padding: 0; /* overwriting cb-box standard behaviour */
    width: 100%;
    border-collapse: separate;

    td,
    th {
        line-height: var(--commonsbooking-font-line-height-small);
        font-size: var(--commonsbooking-font-size-small);
        padding: 4px 0;
        font-weight: normal;
    }

    th {
        font-size: var(--commonsbooking-font-size-small);
        text-align: center;
        vertical-align: middle;
    }

    thead {
        tr {
            color: var(--commonsbooking-color-secondary);

            &:first-child {
                /* Months row */
            }
            &:nth-child(2) {
                /* legend row */
                th:nth-child(1),
                th:nth-child(2) {
                    text-align: left;
                    padding-left: 4px;
                }
            }
        }
    }

    /* make first 2 table columns sticky */
    thead tr:first-child th:first-child,
    thead tr:nth-child(2) th:first-child,
    thead tr:nth-child(2) th:nth-child(2),
    tbody tr td:first-child,
    tbody tr td:nth-child(2) {
        text-align: left;
        padding-left: 5px;
        position: sticky;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        background: variables.$color-white;
    }
    /* place first col */
    thead tr:nth-child(2) th:first-child,
    tbody tr td:first-child {
        left: 0;
    }
    /* place second col */
    thead tr:nth-child(2) th:nth-child(2),
    tbody tr td:nth-child(2) {
        left: 100px;
    }

    /* set bg color */
    thead tr:first-child th:first-child,
    thead tr:nth-child(2) th:first-child,
    thead tr:nth-child(2) th:nth-child(2) {
        background: var(--commonsbooking-color-bg);
    }

    tbody tr:hover td:first-child,
    tbody tr:hover td:nth-child(2) {
        background-color: var(--commonsbooking-color-bg);
    }

    tbody {
        tr {
            background: var(--commonsbooking-color-bg);
            height: 50px;
            overflow: hidden;

            &:hover {
                background: var(--commonsbooking-color-bg);
            }

            td {
                color: var(--commonsbooking-textcolor-dark);
                border-top: 1px solid var(--commonsbooking-color-greyedout);
                border-left: 1px solid var(--commonsbooking-color-gray-background);
                border-bottom: 1px solid var(--commonsbooking-color-bg);
            }
        }
    }

    td {
        text-align: center;
        vertical-align: middle;
        z-index: 11;

        > span {
            display: block;
            margin: 0 auto;
            width: 15px;
            height: 15px;
            border-radius: 0px;

            color: var(--litepickerDayColor);
            background-color: var(--litepickerDayColorBg);

            &.is-holiday {
                @include calendar.day-is-holiday;
            }
            &.is-booked {
                @include calendar.day-is-booked;
            }

            &.is-partially-booked {
                @include calendar.day-is-partially-booked;
            }

            &.is-partially-booked-start {
                @include calendar.day-is-partially-booked-start;
            }
            &.is-partially-booked-end {
                @include calendar.day-is-partially-booked-end;
            }

            &.is-locked {
                @include calendar.day-is-locked;
            }
        }
    }
}

#cb-table-footnote {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px;
    font-size: var(--commonsbooking-font-size-normal);
}