/**
 * Calendar date
 *
 * Description: Styles for a calendar item.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Base
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Base
 * -----------------------------------------------------------------------------
 */

.calendar-date {
	margin-bottom: $margin-standard;
	padding: em(14px) 0 $margin-standard * 0.75;
	border-bottom: 1px solid $grey-light;

	.media-image {
		margin-right: em(23px);
	}

	p {
		margin-bottom: 0 !important;
	}

	.icon {
		font-size: em(40px);
		color: $text-color;
	}

	.calendar-text {
		width: em(68px);
		margin-top: em(6px);
		text-align: center;

		.month {
			font-size: em(15px);
			color: $white;
			background-color: $accent-color;
			padding-top: em(3px, 15px);
			padding-bottom: em(2px, 15px);
		}

		.day {
			font-size: em(30px);
			font-weight: bold;
			color: $text-color;
			background-color: $white;
			padding-top: em(3px, 30px);
			padding-bottom: em(2px, 30px);
			border: 1px solid $grey-light;
			border-top: 0;
		}
	}

	.calendar-recurrent-info {
		.icon {
			font-size: 1em;
			color: $gold-dark;
			padding-right: 5px;
		}
	}

	.calendar-canceled-info {
		.icon {
			font-size: 1em;
			color: $accent-color;
			padding-right: 1px;
			vertical-align: middle;
		}
	}

	.article-list & {
		margin-bottom: 0;
		padding: 0;
		border-bottom: 0;

		.calendar-text {
			width: em(58px);

			.month {
				font-size: em(14px);
				padding-bottom: em(1px, 14px);
				padding-top: 0;
			}

			.day {
				font-size: em(24px);
				padding-bottom: em(2px, 24px);
			}
		}
	}

	@media (max-width: $device-small-max) {
		.media-image {
			float: left !important;
			padding-right: em(10px);
		}
	}
}