@import "../../../basic_imports";

.dates-calendar {
	border: 0;
	>.table > tbody > tr > td {
		white-space: inherit;
	}
	.table {
		border-top: 1px solid $brand-grey-medium;
		margin: 0 auto;
		overflow: hidden;
		width: 100%;
		@media (max-width: $grid-float-breakpoint-max) {
			overflow-y: hidden;
			overflow-x: auto;
		}
		@media (min-width: $screen-md-min) {
			width: 85%;
		}
		th {
			@include medium-weight;
			background-color: $brand-grey-secondary;
			pointer-events: none;
		}
		> tbody > tr > td,
		> tbody > tr > th,
		> thead > tr > td,
		> thead > tr > th {
			border: 1px solid $brand-grey-medium;
			padding: 10px 15px;
			min-width: 94px;
			max-width: 94px;
			height: 60px;
			text-align: center;
			position: relative;
			vertical-align: middle;
			span {
				display: block;
			}
		}
		td:hover::after,
		td:focus::after {
			content: '';
			height: 1000px;
			left: 0;
			position: absolute;
			top: -500px;
			width: 100%;
			background-color: #f4f8fc;
			z-index: -1;
		}
		.table-head{
			background-color: transparent;
			&:after {
				content: '';
				position: absolute;
				background-color: $brand-grey-secondary;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
		.outbound {
			height: 40px;
			text-align: left;
		}
		.sticky {
			position: sticky;
			right: 0;
			top: 0;
			z-index: 1;
		}
		td {
			cursor: pointer;
		}
		.cheaper {
			color: #027a02;
		}
		.expensive {
			color: #e50000;
		}
	}
}

body .dates-calendar tbody tr:hover,
body .dates-calendar tbody tr:hover th,
.row-highlight,
.row-highlight th {
	background-color: #f4f8fc !important;
}

.dates-calendar-legend {
	margin: 10px auto;
	width: 100%;
	@media (min-width: $screen-md-min) {
		width: 85%;
	}
}

.dates-calendar-empty {
	pointer-events: none;
}

.dates-calendar-selected {
	background-color: $brand-secondary;
	color: #FFFFFF;
	&::after {
		content: '';
		height: 1000px;
		left: 0;
		position: absolute;
		top: -500px;
		width: 100%;
		background-color: #f4f8fc;
		z-index: -1;
	}
	tr {
		background-color: #f4f8fc;
	}
}