//------------------------------------------------------------------------------------------------
// CALENDAR
//------------------------------------------------------------------------------------------------

/*
Calendar component.
*/
	

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-calendar-button-color:'primary' !default;
$component-calendar-border-color:'light' !default;
$component-calendar-prevnextmonth-cell-color:'very-light' !default;
$component-calendar-cell-selected:'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-calendar__button {
	min-width: rem(35px);
	height: rem(35px);
	border-radius: $global-border-radius-large;
	background-color: color($component-calendar-button-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration, border-color $global-transition-duration, color $global-transition-duration;

	svg {
		transform: rotate(90deg);
		width: rem(15px);
		height: rem(20px);
		fill: get-theme-text-color($component-calendar-button-color);
	}

	&:hover {
		background-color: color('#{$component-calendar-button-color}-dark');
	}
	&:focus {
		outline: none;
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-calendar-cell-selected), 0.5);
	}
}

.c-calendar__button--next {
	svg {
		transform: rotate(-90deg);
	}
}

.c-calendar__label {
	font-weight: bold;
	font-family: $global-header-font;
	text-align: center;
	user-select: none;
	font-size: rem(22px);
}

.c-calendar__main {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	th {
		padding-bottom: rem(10px);
		user-select: none;
		font-weight: normal;
		text-align: center;
	}
}

.c-calendar__time {
	margin-bottom: rem(10px);
}

/*
[1] Avoids a bug on firefox where TD's with position relative
don't display borders correctly
*/

.c-calendar__cell {
	border: rem(1px) solid color($component-calendar-border-color);
	position: relative;
	user-select: none;
	cursor: pointer;
	background-color: color('white');
	transition: transform $global-transition-duration;
	background-clip: padding-box;
	&:before {
		content: attr(data-calendar-date);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		border: rem(4px) solid transparent;
		z-index: 1;
		top: rem(-1px);
		right: rem(-1px);
		bottom: rem(-1px);
		left: rem(-1px);
	}
	&:after {
		content: '';
		display: block;
		margin-top: 80%;
	}
	&:focus {
		outline: none;
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-calendar-cell-selected), 0.5);
		position: relative;
		z-index: 1;
	}
	&:hover {
		background-color: color('#{$component-calendar-cell-selected}-light');
	}
}

.c-calendar__cell--external-day {
	background-color: color($component-calendar-prevnextmonth-cell-color);
}

.c-calendar__cell--today {
	&:before {
		border-color: color($component-calendar-cell-selected);
	}
}

.c-calendar__cell.is-active {
	background-color: color($component-calendar-cell-selected);
	color: get-theme-text-color($component-calendar-cell-selected);
}

.c-calendar__cell.is-disabled {
	color: color('disabled');
}

@include mq(sm) {
	.c-calendar:not(.c-calendar--small):not(.c-calendar--large) {
		.c-calendar__button {
			min-width: rem(45px);
			height: rem(45px);
			svg {
				width: rem(18px);
				height: rem(22px);
			}
		}

		.c-calendar__label {
			font-size: rem(26px);
		}

		.c-calendar__main {
			font-size: rem(20px);
			th {
				padding-bottom: rem(15px);
			}
		}
	}
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Size modifiers which make elements of the calendar smaller or larger
*/

.c-calendar--small {
	.c-calendar__button {
		min-width: rem(35px);
		height: rem(35px);
		svg {
			width: rem(15px);
			height: rem(20px);
		}
	}
}

@include mq(md) {
	.c-calendar--large {
		.c-calendar__button {
			min-width: rem(60px);
			height: rem(60px);
			svg {
				width: rem(31px);
				height: rem(15px);
			}
		}
		.c-calendar__label {
			font-size: rem(32px);
		}
		.c-calendar__main {
			font-size: rem(28px);
		}
	}
}