@import "../style/variables";
@import "../style/classes";

.htk-calendar {
	@extend %box;
	width: 20em;

	table {
		border-collapse: collapse;
	}
	thead tr,
	tfoot tr {
		font-weight: normal;
		vertical-align: middle;
		text-align: center;
		height: 3em;
	}
	thead > tr {
		&.weekdays > th {
			font-weight: normal;
			color: #999;
			text-transform: lowercase;
		}
		& > th {
			&.previous, &.next {
				font-size: .8rem;

				button {
					border-radius: 50%;
					padding: 10px;
					display: block;
					margin: 0 auto;

					& > .htk-icon {
						font-size: 1rem;
					}
				}
			}
			&.month-year {
				font-size: 1.2rem;
				text-transform: lowercase;
			}
		}
	}
	tfoot tr {
		border-top: none;
	}
	th.button {
		display: table-cell;
	}
	th.button:hover {
		cursor: pointer;
		background-color: rgba(1, 1, 1, 0.2);
	}
	col {
		width: 14.2%;
	}
	tr {
		height: 2em;
	}
	tbody td {
		text-align: right;
	}
	tbody td > div {
		height: 2em;
		width: 2em;
		line-height: 2em;
		text-align: center;
		border-radius: 2em;
		padding: 0.3em;
		margin: 0 auto;
		color: #555;
	}
	div {
		&.disabled {
			color: #bbb;
		}
		&.today {
			font-weight: bold;
			color: black;
		}
		&.selected {
			color: white;
			background-color: $color-primary;
		}
		&.enabled {
			@extend %clickable;

			&:hover {
				background-color: rgba(140, 198, 63, 0.8);
			}
		}
	}
}