$xmas-highlight: #c62129;

body.xmas-calendar {
	.welcome {
		position: absolute;
		top: 12px;
		left: 165px;
		width: 112px;
		height: 50px;
		padding: 2px;
		color: $bg-well;
		font-size: .625rem;
		overflow: hidden;
		transform: rotate(9deg);
		a {
			font-weight: bold;
		}
		#calendar & p {
			margin-bottom: .25em;
		}
	}

	#xmas {
		margin: 0 auto 2em;
		img {
			height: auto;
			max-width: 100%;
		}
	}

	@media (min-width: 500px) {
		// Move the breakpoint
		.only-mobile {
			display: none;
		}
		.only-desktop {
			display: block;
		}
	}

	/* Popup */
	.featherlight:last-of-type {
		background: transparent;
	}
	.featherlight .featherlight-close {
		color: $bg-well;
	}
	#xmas .xmas-content, .featherlight .featherlight-content {
		max-width: 420px;
		padding: 1.5em 1.5em 150px;
		border: 5px solid $xmas-highlight;
		box-shadow: 0 0 2px $bg-well;
		color: $bg-well;
		background: rgba($white, .9) url("../images/christmas/2016/popup-berries.png") 50% 100% / 75% no-repeat;

		img {
			margin-bottom: 1em;
		}
		h2 {
			margin-top: 0;
		}
		p {
			margin: .5em 0;
			font-size: 1.125rem;
		}
	}

	#xmas, .featherlight {
		.pricing {
			input[type="submit"] {
				padding: .425em .5em;
				font-size: 1.1em;
				&:hover {
					color: $accent-primary;
					background-color: $white;
				}
			}
			.price {
				padding: .375em .5em;
			}
			form[data-ajax] + .ajax-progress {
				padding: .375em 0;
				color: $white;
				z-index: 1;
			}
		}
	}

	/* Calendar days */
	#calendar {
		position: relative;
		width: 100%;
		height: 100%;
		h2 {
			font-size: 1.5em;
		}
		ol {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			list-style: none;
			li {
				position: absolute;
				display: block;
				width: 16%;
				height: 8%;
				margin: 0;
				padding: 0;
				line-height: 2.2;
				text-align: center;
				overflow: hidden;
				opacity: .2;

				&.open {
					opacity: 1;
				}
				&.selected {
					font-weight: bold;
				}

				/* Text fallback */
				@media (min-width: 550px) {
					font-size: 1.875rem;
				}
				@media (min-width: 700px) {
					font-size: 2.625rem;
				}
				@media (min-width: 950px) {
					font-size: 3.75rem;
				}

				/* stylelint-disable block-opening-brace-space-before */

				@media (max-width: 499px) {
					/* Rows */
					&:nth-child(-n+4) { top: 32%; }
					&:nth-child(n+5)  { top: 43%; }
					&:nth-child(n+9)  { top: 54.5%; }
					&:nth-child(n+13) { top: 65.5%; }
					&:nth-child(n+17) { top: 77%; }
					&:nth-child(n+21) { top: 88%; }

					/* Columns */
					&:nth-child(4n+1) { left: 10.5%; }
					&:nth-child(4n+2) { left: 31%; }
					&:nth-child(4n+3) { left: 52%; }
					&:nth-child(4n+4) { left: 73%; }
				}

				@media (min-width: 500px) {
					width: 11%;
					height: 10%;

					/* Rows */
					&:nth-child(-n+6) { top: 45.1%; }
					&:nth-child(n+7)  { top: 58.4%; }
					&:nth-child(n+13) { top: 71.5%; }
					&:nth-child(n+19) { top: 84.8%; }

					/* Columns */
					&:nth-child(6n+1) { left: 8%; }
					&:nth-child(6n+2) { left: 22.7%; }
					&:nth-child(6n+3) { left: 37.5%; }
					&:nth-child(6n+4) { left: 52.4%; }
					&:nth-child(6n+5) { left: 67%; }
					&:nth-child(6n+6) { left: 82%; }
				}
				/* stylelint-enable */

				@media (max-width: 1024px) {
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						width: 70%;
						margin-top: 26%;
					}
				}
				img {
					vertical-align: middle;
				}
			}

			a {
				display: block;
				width: 100%;
				color: $white;
			}
			li:nth-child(odd), li:nth-child(odd) a {
				color: $xmas-highlight;
			}
		}
	}
}