$easeInOut: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$turnDuration: 0.6s;

// Animation mixin
@mixin animate($name, $easing, $duration: 300ms, $delay: 0s, $iteration: 1, $direction: normal, $fill-mode: forwards) {
	animation: $name $duration $easing $delay $iteration $direction $fill-mode
};
@mixin boxShadown() {
	box-shadow: inset 0 10px 28px rgba(#000, 0.03);
}
$border: whitesmoke;
$card: #fefefe;
$font-family: 'Droid Sans Mono', monospace;
// $font-size: 5em
$font-width: lighter;
$font-color: lighten(black, 20%);

$width: 140px;
$height: 120px;

.flip-clock {
	display: flex;
}
	// justify-content: space-between
	// width: 3 * $width + 80px

.flip-unit-container {
	display: block;
	position: relative;
	width: $width;
	height: $height;
	perspective-origin: 50% 50%;
	perspective: 300px;
	background-color: $card;
	border-radius: 3px;
	box-shadow: 0px 10px 10px -10px grey;
}

.before, .now {
	display: flex;
	position: relative;
	justify-content: center;
	width: 100%;
	height: 50%;
	overflow: hidden;
	border: 1px solid $border;
	position: relative;
	@include boxShadown;
	
	span {
		// font-size: $font-size
		font-family: $font-family;
		font-weight: $font-width;
		// color: $font-color
		color: inherit;
	}
}

.before {
	align-items: flex-end;
	border-bottom: 0.5px solid $border;
	border-radius: 5px 5px 0 0;
	
	span {
		transform: translateY(50%);
	}
}

.now {
	align-items: flex-start;
	border-top: 0.5px solid $border;
	border-radius: 0 0 5px 5px;
	
	span {
		transform: translateY(-50%);
	}
}

.flip-card {
	display: flex;
	justify-content: center;
	position: absolute;
	left: 0;
	width: $width;
	height: $height / 2;
	overflow: hidden;
	backface-visibility: hidden;
	
	span {
		font-family: $font-family;
		// font-size: $font-size
		font-weight: $font-width;
		// color: $font-color
		color: inherit;
	}
	
	&.unfold {
		top: 50%;
		align-items: flex-start;
		transform-origin: 50% 0%;
		transform: rotateX(180deg); // from 180 to 0
		background-color: $card;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border: 1px solid $border;
		border-top: 0.5px solid $border;
		@include boxShadown;
		@include animate(unfold, $easeInOut, 0.6s);
		transform-style: preserve-3d;
		
		span {
			transform: translateY(-50%);
		}
	}
		
	&.fold {
		top: 0%;
		align-items: flex-end;
		transform-origin: 50% 100%;
		transform: rotateX(0deg); // from 0 to -180
		background-color: $card;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border: 0.5px solid $border;
		border-bottom: 0.5px solid $border;
		@include boxShadown;
		@include animate(fold, $easeInOut, 0.6s);
		transform-style: preserve-3d;
		
		span {
			transform: translateY(50%);
		}
	}
}

@keyframes fold {
	0% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(-180deg);
	}
}

@keyframes unfold {
	0% {
		transform: rotateX(180deg);
	}
	100% {
		transform: rotateX(0deg);
	}
}