@import 'variables';

.m-calendar {
	display: inline-block;

	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		table-layout: fixed;
	}

	td {
		padding: 8px 0;
		text-align: center;
		cursor: pointer;
		color: @color-gray;
		border: 1px solid @color-gray;
	}

	thead {
		td {
			color: @color-blue;
			font-size: 11px;
			font-weight: 700;
			text-transform: uppercase;
			font-size: 12px;
		}
	}

	tbody td {
		color: @color-gray-40;

		&:hover {
			background: @color-blue;
			border-color: @color-blue;
			color: @color-white;
		}
	}

	.current-day {
		color: @color-blue;
		font-weight: bold;
	}

	.disabled-day {
		background-color: @color-gray;
		color: @color-gray-40;
		cursor: not-allowed;
		opacity: .4;

		&.current-day {
			color: @color-blue;

			&:hover {
				color: @color-blue;
			}
		}

		&:hover {
			background-color: @color-gray;
			border-color: @color-gray;
			color: @color-gray-40;
		}
	}

	.prev-month,
	.next-month {
		color: @color-gray-60;

		&-disabled {
			opacity: .4;
		}
	}

	.toolbar {
		line-height: 30px;
		color: @color-blue;
		text-align: center;
		margin-bottom: 13px;

		button {
			position: relative;
			width: 30px;
			height: 30px;
			line-height: 30px;
			color: #ffffff;
			border: 1px solid @color-blue;
			border-radius: 50%;
			background: @color-blue;
			font-size: 20px;
			padding: 0;
			text-align: center;
			outline: 0;
			z-index: @cover_zIndex;
			cursor: pointer;
		}

		&:disabled {
			cursor: not-allowed;
		}

		.prev-month {
			float: left;
		}

		.next-month {
			float: right;
		}

		.current-date {
			color: @color-blue;
		}
	}
}