//
// @file
//
// Used for single and multiple event pages (not calendar views).
//

@import "bootstrap/mixins.less";
@import "timely-mixins.less";

// ================
// = Events pages =
// ================

@event-font-size: @font-size-base * 1.1;
@event-line-height: @line-height-computed * 1.25;

.ai1ec-single-event,
.ai1ec-multi-event {
	.ai1ec-event-details {
		margin: @event-line-height * 0.6 0;
		.ai1ec-row {
			margin-bottom: @event-line-height * 0.2;
		}
	}

	.ai1ec-field-label {
		line-height: 25px;
	}

	// Date/time & recurrence.
	.ai1ec-time .ai1ec-field-value {
		font-size: 1.2em;
		.ai1ec-allday-badge {
			font-size: 0.75em;
			line-height: 1.4em;
		}
	}
	.ai1ec-recurrence {
		vertical-align: bottom;
		.ai1ec-btn.ai1ec-disabled {
			cursor: default;
			.ai1ec-opacity( 1 );
			pointer-events: auto;
		}
	}

	// Categories & tags.
	.ai1ec-category {
		font-size: 0.8em;
	}
	.ai1ec-tag {
		font-size: 0.85em;
	}

	// Location & Google map.
	.ai1ec-gmap-container {
		border: 1px solid @table-border-color;
		border-radius: @border-radius-base;
		position: relative;
	}
	#ai1ec-gmap-canvas {
		width: 100%;
		height: 200px;
	}
	.ai1ec-gmap-link {
		bottom: -1px;
		display: none;
		margin: 0;
		position: absolute;
		right: -1px;
	}
	.ai1ec-gmap-container:hover .ai1ec-gmap-link {
		display: block;
	}
	#ai1ec-gmap-canvas input {
		margin: 0 !important;
	}
	.ai1ec-gmap-placeholder {
		border-radius: 4px;
		color: @link-color;
		cursor: pointer;
		height: 12em;
		border: 1px dashed @table-border-color;
		min-width: 18em;
		margin-bottom: 0.3em;
		text-align: center;
		width: 100%;
		&:hover {
			border-color: darken( @table-border-color, 15% );
			color: @link-hover-color;
		}
		strong {
			position: relative;
			top: 45%;
		}
	}
	.ai1ec-gmap-container-hidden {
		position: absolute !important;
		visibility: hidden;
	}
	.ai1ec-contact span {
		display: inline-block;
		white-space: nowrap;
		i:first-child:before {
			text-align: center;
			width: 1.7em;
		}
	}
}

// Single event page only.
.ai1ec-single-event {
	position: relative;
	font-size: @event-font-size;
	line-height: @event-line-height;
	// Event avatar/featured image.
	.ai1ec-event-avatar {
		max-width: 40%;
		img {
			max-width: 300px;
			max-height: 300px;
			min-height: 0;
			width: 100%;
		}
	}
	.ai1ec-event-details {
		overflow: hidden;
	}
	.ai1ec-actions {
		.ai1ec-pull-right;
		margin-left: 10px;
		.ai1ec-btn-group-vertical {
			margin-bottom: 10px;
			display: block;
		}
		.ai1ec-btn {
			font-size: @font-size-small;
			text-align: left;
		}
		.ai1ec-fa-fw {
			width: 20px;
		}
	}
	.timely-tickets-row {
		td {
			vertical-align: top;
			padding-bottom: 10px;
		}
		td.ai1ec-tickets-info {
			padding-left: 12px;
			.ai1ec-tickets-description {
				color: #666;
				line-height: 1.1;
				font-size: 12px;
			}
		}
		.ai1ec-tickets-info-inactive {
			.ai1ec-tickets-title {
				text-decoration: line-through;
				color: #666;
			}
		}
		.ai1ec-tickets-availability {
			font-size: 12px;
			white-space: nowrap;
		}
		.ai1ec-tickets-amount {
			text-align: right;
			width: 1px;
			select {
				min-width: 48px !important;
			}
		}
	}
	.ai1ec-table {
		border: none;
		table-layout: inherit;
	}
}

// This appears in a tooltip, so cannot be wrapped by a class qualifier.
.ai1ec-recurrence-exclude {
	font-size: smaller;
	color: @text-muted;
}

// Multi-event loop and event excerpts.
.ai1ec-multi-event,
.ai1ec-excerpt {
	font-size: @event-font-size * 0.9;
	line-height: @event-line-height * 0.9;
	.ai1ec-field-label {
		margin-top: @event-font-size * 0.1;
	}
}

.ai1ec-excerpt {
	margin-bottom: @event-line-height * 0.5;
}

// Footer.
.ai1ec-event-footer {
	color: @text-muted;
	clear: both;
	margin: @line-height-computed / 2 0;
}

// White space breaks on the event page
.ai1ec-tooltip {
	white-space: normal !important;
}