$prefix: 'calc';

@keyframes #{$prefix}-display_digit-show {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes #{$prefix}-display_digit-hide {
	0% {
	}
	100% {
		opacity: 0;
		transform: translateY(-0.4em);
	}
}

@keyframes #{$prefix}-display_innerLayout-shake {
	0% {
	}
	50% {
		transform: translateX(-0.5em);
	}
	100% {
		transform: none;
	}
}

.#{$prefix}-display {
	align-items: center;
	display: flex;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	transition: opacity 0.2s ease-out;
	width: 100%;

	&:active {
		// Provided by theme:
		// background-color: rgba(white, 0.05);
	}

	&#{&}-dimmed {
		opacity: 0.5;
	}

	&_innerLayout {
		box-sizing: border-box;
		margin-left: 9.4vw;
		margin-right: 9.4vw;
		position: relative;
		width: 100%;

		&#{&}-shake {
			animation-duration: 0.2s;
			animation-fill-mode: forwards;
			animation-name: #{$prefix}-display_innerLayout-shake;
			animation-timing-function: ease-out;
		}
	}
	&_digitsLayout {
		position: relative;
		width: 100%;
	}
	&_digit {
		font-size: 10vw;
		font-weight: 300;
		position: absolute;
		transition: 0.15s left ease-in-out, 0.2s top ease-in-out;

		&#{&}-placeholder {
			display: inline;
			position: static;
			visibility: hidden;
		}

		&#{&}-show {
			animation-duration: 0.2s;
			animation-fill-mode: forwards;
			animation-name: #{$prefix}-display_digit-show;
			animation-timing-function: ease-out;
		}
		&#{&}-hide {
			animation-duration: 0.2s;
			animation-fill-mode: forwards;
			animation-name: #{$prefix}-display_digit-hide;
			animation-timing-function: ease-in;
		}
	}
	&_noteLayout {
		font-size: 0.7rem;
		left: 9.4vw;
		line-height: 1.6;
		opacity: 0.5;
		position: absolute;
		right: 9.4vw;
		text-align: left;
		top: 4vh;
	}
}
