/**
* 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);
}