@import "variables";

.countdown {
	.countdown__head {
		padding-right: 32px;
		white-space: nowrap;
	}
	.countdown__body {
		white-space: nowrap;
		.countdown__timer {
			margin: 0; padding: 0; list-style: none;
			li {
				display: inline-block;
				vertical-align: top;
				&.countdown__divider {}
				.countdown__digit {
					span {}
				}
				.countdown__label {}
			}
		}
	}
	&.countdown-flip {
		display: inline-block;
		.countdown__head {
			margin-bottom: 4px;
		}
		.countdown__body {
			.countdown__timer {
				li {
					&.countdown__divider {
						position: relative;
						width: 12px;
						height: 38px;

						animation: flicker 1s ease-in-out infinite;
						-webkit-animation: flicker 1s ease-in-out infinite;
						@keyframes flicker {
							0% { opacity: 1; }
							90% { opacity: 0.25; }
							100% { opacity: 1; }
						}
						@-webkit-keyframes flicker {
							0% { opacity: 1; }
							90% { opacity: 0.25; }
							100% { opacity: 1; }
						}

						&.opacity { visibility: hidden; }

						&:after, &:before {
							content: '';
							background: $color_gray_80;
							position: absolute; top: 10px; left: 50%;
							display: block; width: 4px; height: 4px;
							margin-left: -2px;
							@include border-radius(50%);
						}
						&:before {
							top: auto;
							bottom: 10px;
						}
						/*.color-white & {
							&:after, &:before { background: $color_white; }
						}*/
					}
					.countdown__digit {
						span {
							background: $color_white;
							display: inline-block;
							vertical-align: top;
							width: 24px;
							height: 36px;
							font-size: 24px;
							line-height: 34px;
							color: $color_gray_80;
							text-align: center;
							@include border-radius(3px);
							box-shadow: 0 0 5px $color_gray_60;
							& + span { margin-left: 4px; }
						}
					}
					.countdown__label {
						padding-top: 2px;
						font-size: 10px;
						text-align: center;
					}

					&.countdown__seconds {
						.countdown__digit {
							span {
								animation: blink 1s ease-in-out infinite;
								-webkit-animation: blink 1s ease-in-out infinite;
								@keyframes blink {
									0% { box-shadow: 0 0 5px $color_gray_60; }
									15% { box-shadow: 0 0 10px $color_warning; }
									50% { box-shadow: 0 0 5px $color_gray_60; }
								}
								@-webkit-keyframes blink {
									0% { box-shadow: 0 0 5px $color_gray_60; }
									15% { box-shadow: 0 0 10px $color_warning; }
									50% { box-shadow: 0 0 5px $color_gray_60; }
								}
							}
						}
					}
				}
			}
		}
		/*&.countdown_warning {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {}
						.countdown__digit {
							span {
								background: $color_body;
							}
						}
						.countdown__label {}
					}
				}
			}
		}
		&.countdown_danger {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {}
						.countdown__digit {
							span {
								background: $color_pink;
							}
						}
						.countdown__label {}
					}
				}
			}
		}*/
		&.countdown_finite {
			opacity: 0.5;
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							animation: none;
							-webkit-animation: none;
						}
						.countdown__digit {
							span {
								animation: none;
								-webkit-animation: none;
							}
						}
						.countdown__label {}
					}
				}
			}
		}

		&.divider-white {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							&:after, &:before {
								background: $color_white;
							}
						}
						.countdown__digit {}
						.countdown__label {}
					}
				}
			}
		}

		&.all-white {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							&:after, &:before {
								background: $color_white;
							}
						}
						.countdown__digit {}
						.countdown__label {
							background: $color_white;
							margin-top: 4px;
							padding: 1px 0 2px;
							font-size: 10px;
							line-height: 12px;
							color: $color_dark;
							@include border-radius(3px);
						}
					}
				}
			}
		}
	}
}