
$calendar-tab-height: 30px;

.zarafa-calendar-container {
	position: absolute;
}

.zarafa-calendar-verticalline
{
	position: absolute;
	overfow: hidden;
	background-color: black;
}

.zarafa-calendar-column
{
	position: absolute;
}

/* Calendar borders */
.zarafa-calendar-border-left
{
	position: absolute;
	overflow: hidden;
	border-left: 1px solid;
}

.zarafa-calendar-border-right
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
}

.zarafa-calendar-border-top
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
	border-left: 1px solid;
	border-top: 1px solid;
}

.zarafa-calendar-border-bottom
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
	border-left: 1px solid;
	border-bottom: 1px solid;
}

/* Quick appointment CSS, drag and type */
.zarafa-calendar-textedit-body,
.zarafa-calendar-textedit-header
{
	border: 1px solid #000000;
	position : absolute;
	z-index : 999;
	overflow: hidden;
	resize: none;
}

/* the tabs of the calendars */
.zarafa-calendar-container-tabarea {
	position: absolute;

	.zarafa-calendar-tab-contents {
		cursor: pointer;
		height: $calendar-tab-height;
		line-height: $calendar-tab-height;
		float: left;
		margin-right: $padding-medium;
		padding: 0 $padding-large;
		position: relative;
		min-width: 84px;

		.zarafa-calendar-tab-title {
			position: relative;
			overflow : hidden;
			white-space:nowrap;
			color: white;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* cross icon is 7x7 px */
		.zarafa-calendar-tab-icon-close {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 7px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* arrow_left_l icon is 5x9 px */
		.zarafa-calendar-tab-icon-merge {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 5px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* arrow_right_l icon is 5x9 px */
		.zarafa-calendar-tab-icon-separate {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 5px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}
	}
	.zarafa-calendar-tab-contents.zarafa-with-merge-icon {
		padding-left: $padding-large - $padding-medium;
	}
	.zarafa-calendar-tab-contents.zarafa-with-close-icon,
	.zarafa-calendar-tab-contents.zarafa-with-separate-icon {
		padding-right: $padding-large - $padding-medium;
	}
	.zarafa-calendar-tab-contents.zarafa-with-close-icon.zarafa-with-separate-icon {
		.zarafa-calendar-tab-icon-close {
			padding-right: $padding-medium/2;
		}
		.zarafa-calendar-tab-icon-separate {
			padding-left: $padding-medium/2;
		}
	}

	.zarafa-calendar-tab-contents.light-background {
		.zarafa-calendar-tab-title {
			color: black;
		}
	}
}

/* The headers of the calendars */
.zarafa-calendar-container-header {
	.k-html-header-background {
		display: grid;
		display: -ms-grid;

		&.k-dark {
			color: $white;
		}

		.k-cal-header-title {
			padding: 0 $padding-large;
			line-height: $font-line-height-extra-large - 1;
			white-space: nowrap;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.k-today .k-cal-header-title {
			background: $action-bgcolor;
			color: $white;
		}
		.k-active-border {
			border-right: 1px solid $action-bgcolor;
		}
		.k-today:first-child {
			border-left: 1px solid $action-bgcolor;
		}
	}

	.k-html-header-appointment {
		position: absolute;
		top: 0;
	}
}

.zarafa-calendar-container-body {
	.k-html-body-background {
		display: grid;
		display: -ms-grid;

		> div {
			border-width: 0 1px 1px 0;
			border-style: solid;
			position: relative;

			&.k-active-border {
				border-color: $action-bgcolor;
			}
		}
		.k-today.k-day-0 {
			border-left: 1px solid $action-bgcolor;
		}
	}
	.k-html-body-appointment {
		position: absolute;
		top: 0;
	}
}

.k-appointment-box {
	position: absolute;
	color: $font-color-dark;
	box-sizing: border-box;
	border: 1px solid $white;
	cursor: move;
	z-index: 100;

	.k-status {
		border: none;
	}

	&.k-dark {
		color: $font-color-light;
	}

	&.k-inactive {
		opacity: 0.4;
	}

	&.k-selected {
		border-color: #000000;
		z-index: 110;

		.k-resizehandle {
			display: block;
		}
	}

	.k-resizehandle {
		position: absolute;
		left: calc(50% - 3.5px);
		top: -3.5px;
		display: none;
		background: $white;
		border: 1px solid black;
		box-sizing: border-box;
		width: 7px;
		height: 7px;
		cursor: row-resize;

		&.k-resizehandle-end {
			top: calc(100% - 3.5px);
		}
	}

	.k-status {
		height: 100%;
		float: left;
		border-width: 1px 0 1px 1px;
		border-style: solid;
		box-sizing: border-box;
		margin-right: $padding-small;

		&.k-status-tentative {
			background: url(data:image/gif;base64,R0lGODlhCAAIAIABAP///wAAACH5BAEKAAEALAAAAAAIAAgAAAIPhIN2qRgKHIwPslZxpq8AADs=) repeat;
		}
		&.k-status-outofoffice {
			background: #912787;
		}
		&.k-status-free {
			background: $white;
		}
	}

	.k-icons {
		float: left;
		margin-right: $padding-small;
		padding-top: $padding-small;

		.k-icon {
			float: left;
			width: 16px;
			height: 16px;

			/*
			&.k-icon-private {
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADaSURBVCiRfZE9SkNRFIS/GbMBW0uthKQVBCEbMNroBrIE95BtBMGfgJDKFYQUWgQEwR1Y2VgYbQxMCl/kRd/NwMA9l++eM5xLEpoMnEt6kvQhaQb0klCCjyWl5kdJn8CJKmBNtp+BzqpOsi1pCixa/+gf7dQLSe/Vce7Cg7fC/UtT/v6f/CsvgO7aBEm7tveBe+ALGAMPkm6TtJNM6p1PJcX2je1roNu4wQq+kPRq+8r2CDja8D+cSZravrR9BxyW4CRQxRhKGgMHm+AkbAHfwF6SQZJZYZ2/WgIY6MDMF1W9zwAAAABJRU5ErkJggg==) no-repeat center center;
			}
			*/
		}
	}

	.k-title {
		line-height: $font-default-line-height + 3;
		max-height: 100%;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
		padding-right: $padding-small;
		display: block;
	}
}

.k-html-header-appointment {
	.k-appointment-box {
		/* selection in the header of the days view has the handles on the left and tight sides */
		.k-resizehandle {
			left: -3.5px;
			top: calc(50% - 3.5px);
			cursor: col-resize;

			&.k-resizehandle-end {
				left: calc(100% - 3.5px);
			}
		}
	}
}

.zarafa-calendar-boxview {
	.k-html-header-background {
		.k-cal-header-title {
			line-height: $font-line-height-extra-large + 5;
		}
	}

	.zarafa-calendar-container-body {
		.k-html-body-background {
			height: 100%;

			.k-header {
				padding: 0 $padding-large;
				line-height: $font-default-line-height + 4px;
				cursor: pointer;
				/* we must move the header over the appointment layer to be able to catch its events */
				position: relative;
				z-index: 10;
			}

			.k-action-border {
				border-color: $action-bgcolor !important;
			}
			.k-today {
				border-left-width: 2px;
				border-right-width: 3px;
				border-bottom-width: 3px;

				.k-header {
					background: $action-bgcolor !important;
					color: $white;
				}
			}
			.k-status-tentative {
				background-image: url(data:image/gif;base64,R0lGODlhCAAIAIABAP///wAAACH5BAEKAAEALAAAAAAIAAgAAAIPhIN2qRgKHIwPslZxpq8AADs=);
				background-repeat: repeat;
			}
		}

		.k-html-body-appointment {
			height: 100%;
			width: 100%;
		}
	}

	.k-appointment-box {
		.k-resizehandle {
			left: -3.5px;
			top: calc(50% - 3.5px);
			cursor: col-resize;
		}

		.k-resizehandle-end {
			left: calc(100% - 3.5px);
		}
	}

	.k-expand-btn {
		width: 14px;
		height: 14px;
		border-width: 1px;
		border-style: solid;
		border-radius: 7px;
		position: absolute;
		background: $white;
		z-index: 120;
		cursor: pointer;
		opacity: 0.7;

		&:hover {
			opacity: 1;
		}

		&::after {
			display: block;
			content: ' ';
			width: 0px;
			height: 0px;
			position: absolute;
			bottom: 2px;
			right: 3px;
			/* some css magic to create a rectangle with pure css */
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid;
			border-top-color: inherit;
			transform-origin: bottom;
			transform: scale(1, 2);
		}
	}
}

/* Timestrip */
.zarafa-calendar-timestrip-element div {
	color: $dark-grey;
	padding-right: 22px;
}

/* Margin between checkbox and calendar icon in hieracy */
.zarafa-hierachy-node-cb {
	margin-right: 6px;
}

/*
 * Calendar timestrip
 */
.zarafa-calendar-timestrip
{
	position: absolute;
	background-color : #9fbf00;
	background-color: #f7f3f7;
	overflow : hidden;
	border-left: 1px solid black;
}

.zarafa-calendar-timestrip-element
{
	position: absolute;
	color: #393839;
	text-align:right;
}

.zarafa-calendar-timestrip-element div
{
	padding-top:4px;
	padding-right:6px;
}

.zarafa-calendar-timestrip-line
{
	overflow: hidden;
	position: absolute;
	background-color: $grey;
	margin-left: 2*$padding-extra-large;
}

.k-calendar-timestrip-indicator-icon
{
	height: 16px;
	width: 16px;
	left: 6px;
	position: absolute;
}

.k-calendar-timestrip-indicator-line
{
	height:1px;
	position:absolute;
	background-color: #e40023;
	overflow: hidden;
	left: 24px;
}

/* Currently selected tab */
.zarafa-calendar-tabarea .zarafa-calendar-tab-selected .zarafa-calendar-tab-title
{
	font-weight:bold;
}

.zarafa-calendar-scrollable
{
    position: absolute;
    overflow-y : scroll;
    overflow-x : hidden;
}

.zarafa-calendar-header
{
	position: absolute;
}

.zarafa-calendar-bottomarea
{
	position: absolute;
}

/* Drag & Drop */

/* Calendar drag selection (selecting an new appointment) */
.zarafa-calendar-selection-dragging
{
	background-color : #7f7f7f;
}

.zarafa-calendar-selection
{
	overflow : hidden;
	position : absolute;
	cursor : move;
	z-index : 99;
	opacity:.5;
}

.zarafa-calendar-dragproxy-time {
	padding: $padding-small + 2px 0 0 $padding-small;
}

.zarafa-calendar-tabarea-stroke {
	border-top: $padding-medium solid $white;
	position: relative;
}

.zarafa-calendar-tabarea-stroke.zarafa-calendar-tab-selected {
	border-top-color: $action-bgcolor;
}
