.event-caption {
	display: table;
	height: 50px;
	position: relative;
	text-align: center;
}

.event-caption-header-wrap {
	display: table-row;
}

$event-caption-header-bg: $event-header-bg;
$event-caption-border: $yellow;

.event-caption-header {
	background-color: $event-caption-header-bg;
	border-color: $event-caption-border;
	border-style: solid;
	border-width: 1.5px 1.5px 0;
	display: table-cell;
	font-size: small;
	padding: 3px;
	position: relative;
	transition: border-color $default-transition-time;
	vertical-align: top;
}

.event-caption-header > .fa-map-pin {
	@include td-pos(left, 50%);
	color: $text-color;
	font-size: 8px;
	position: absolute;
	top: -5px;
	transform: rotate(10deg);
}

.event-caption-pseudoborder {
	background-color: $white;
	bottom: 0;
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
}

.event-caption-body-wrap {
	display: table-row;
	height: 70%;
}

$event-caption-body-bg: $event-body-bg;

.event-caption-body {
	background-color: $event-caption-body-bg;
	border-color: $event-caption-border;
	border-style: solid;
	border-width: 0 1.5px 1.5px;
	color: $text-color;
	display: table-cell;
	padding: 3px;
	transition: border-color $default-transition-time;
	vertical-align: middle;
}

.event-caption.placeholder .event-caption-header {
	background-color: rgba(desaturate($event-caption-header-bg, 55%), .5);
}


.event-caption.placeholder .event-caption-body {
	background-color: rgba(desaturate($event-caption-body-bg, 50%), .5);
	color: transparent;
	text-shadow: 0 0 1.5px rgba(0, 0, 0, .5);
}

.event-caption.placeholder .event-caption-header,
.event-caption.placeholder .event-caption-body {
	border-color: $gray-lightest;
}

.event-caption-wrap {
	display: inline-block;
}

.event-caption-wrap + .event-caption-wrap {
	@include td-margin(left, 15px);
}

.event-caption-action {
	width: 65px;
}

.event-caption-add .event-caption-body,
.event-caption-add .event-caption-header {
	border-color: darken($green, 25%);
}

.event-caption-delete .event-caption-body,
.event-caption-delete .event-caption-header {
	border-color: lighten($red, 5%);
}

.event-caption-action.placeholder .event-caption-body {
	text-shadow: 0 0 0;
}

.event-caption-add-text {
	font-size: medium;
	line-height: 50px;
}

.event-caption-icon {
	@include td-pos(right, -5%);
	bottom: 0;
	position: absolute;
}

.event-caption-add .event-caption-icon {
	color: $green-dark;
}

.event-caption-delete .event-caption-icon {
	color: $red;
}
