@import "mixins";

$preview-background: #220E10;

/* Base common CSS : DON'T CHANGE */
@import "base";

/** Variables **/
/*=============*/

$brand-primary: #e05d22;

$navigation-height: 30px;
$border-radius: 2px;
$border-radius-large: 3px;
$text-color: #FFF;

.calendar-archives.twentythirteen {
	a {
		text-decoration: none;
	}

	/** CALENDAR NAVIGATION BLOCK (top) **/

	.calendar-navigation {
		height: $navigation-height !important;
		margin-bottom: 3px;
		border-bottom: 3px solid #b93207;
		border-radius: $border-radius;
		color: $text-color;
		@include gradient-vertical(#e05d22, #d94412);

		> .prev-year,
		> .next-year {
			width: 30px;
			border-radius: $border-radius;
			font-size: 18px;
			text-align: center;
			color: $text-color;

			&:hover {
				@include gradient-vertical(#ed6a31, #e55627);
			}

			&.disabled {
				opacity: .4;
				cursor: default;
				&:hover {
					background: none;
				}
			}
		}

		> .prev-year {
			border-right: 1px #B93207 solid;
		}

		> .next-year {
			border-left: 1px #B93207 solid;
		}

		> .menu-container {
			position: relative;
			height: $navigation-height;
			padding: 0;
			text-align: center;
			text-transform: capitalize;

			&:hover {
				background-color: rgba(#FFFFFF, .1);
				> .arrow-down {
					border-left: 1px solid #B93207;
				}
			}

			> a.title {
				display: block;
				height: $navigation-height;
				line-height: $navigation-height;
				color: $text-color;
				vertical-align: middle;

				&:hover {

				}
				&:visited {

				}
			}

			> ul, > ul > li {
				margin: 0;
				padding: 0;
			}

			> ul.menu {
				position: absolute;
				display: none;
				width: 100%;
				top: 0;
				overflow: hidden;
				border-radius: $border-radius;
				box-shadow: #000 0 0 10px;
				@include gradient-vertical(#e05d22, #d94412);
				z-index: 99;
			}

			li {
				display: block;
				> a {
					display: block;
					height: $navigation-height;
					line-height: $navigation-height;
					color: $text-color;
					&:hover {
						background: #220E10;
						cursor: pointer;
						color: #E62B15;
					}
					&.selected {
						color: $text-color;
						&:hover {
							text-decoration: none;
							color: $text-color;
							cursor: default;
							background: none;
						}
					}
					&.current {

					}
				}
			}

			> .arrow-down {
				position: absolute;
				width: 24px;
				height: $navigation-height;
				line-height: $navigation-height;
				top: 0;
				right: 0;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 9px;
				color: $text-color;
				cursor: pointer;
				&:hover {
					@include gradient-vertical(#ed6a31, #e55627);
				}
			}

			&.years {

			}

			&.months {

			}
		}
	}

	/** CALENDAR GRID BLOCK **/
	> .archives-years {
		background-color: #220E10;
	}
	// Month and Day, common styles
	.month, .day {
		position: relative;
		display: block;
		overflow: hidden;
		float: left;
		color: #e6402a;
		background: #3a1c1f;
		border-bottom: 1px #220E10 solid;
		border-right: 1px #220E10 solid;
		border-radius: $border-radius-large;

		// Month/day with posts
		&.has-posts {

			a {
				display: block;
				width: 100%;
				height: 100%;
				border-bottom: 3px solid #b93207;
				border-radius: $border-radius-large;
				color: $text-color;
				@include gradient-vertical(#e05d22, #d94412);

				&:hover {
					@include gradient-vertical(#ed6a31, #e55627);
				}
			}
		}
		// last month/day of a single line
		&.last {
			margin-right: 0 !important;
		}
	}

	// MONTH only styles
	.month {
		width: 25%; // 100%(line width) - 3%(margin-right) * 3(last one is 0) / 4(months per line)
		height: 50px;
		// Month name inside a month square
		.month-name {
			text-transform: capitalize;
			font-size: 16px;
			font-weight: 400;
			display: block;
			position: absolute;
			top: 6px;
			left: 8px;
		}
		// Contains the "0 posts" text inside a month square
		.postcount {
			display: block;
			position: absolute;
			right: 6px;
			bottom: 6px;
			// Number of posts style
			.count-number {

			}
			// Text "posts" style
			.count-text {
				font-size: 9px;
			}
		}
	}

	// DAY only styles
	.day {
		width: 14.285% !important;
		height: 25px;
		padding: 5px 0;
		text-align: center;
		line-height: 100%;
		// Day with posts

		&.has-posts {
			padding: 0;
			a {
				padding: 5px 0 !important;
				text-decoration: none;
			}
		}
		&.noday {
			border: none;
			box-shadow: none;
			background: none !important;
		}
		// WEEKDAY style. Has common styles with DAY
		&.weekday {
			display: inline-block;
			border: none;
			font-size: 85%;
			color: $text-color;
			text-transform: uppercase;
			box-shadow: none;
			background: none !important;
		}
	}

	// A single line of days
	.week-row {
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #220E10;
		// line with weekday names
		&.weekdays {
			margin-bottom: 3px;
		}
	}
}