$prefix: 'calc';

@keyframes #{$prefix}-menuItem-show {
	0% {
		opacity: 0;
		visibility: visible;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes #{$prefix}-menuItem-hide {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

.#{$prefix}-menu {
	display: flex;
	justify-content: space-between;
	pointer-events: none;

	&#{&}-show {
		.#{$prefix}-menuItem {
			animation-duration: 0.2s;
			animation-name: #{$prefix}-menuItem-show;
			animation-timing-function: ease-out;

			@for $i from 1 through 4 {
				&:nth-child(#{$i}) {
					animation-delay: $i * 0.03s;
				}
			}
		}
	}
	&#{&}-hide {
		.#{$prefix}-menuItem {
			animation-duration: 0.2s;
			animation-name: #{$prefix}-menuItem-hide;
			animation-timing-function: ease-out;
		}
	}
}
.#{$prefix}-menuItem {
	animation-fill-mode: forwards;
	flex-basis: 25%;
	height: 4vh;
	pointer-events: auto;
	position: relative;
	opacity: 0;
	white-space: nowrap;

	&_innerLayout {
		bottom: 0;
		left: 0.5vh;
		position: absolute;
		right: 0.5vh;
		top: 0;
	}
	&_button {
		// Provided by theme:
		// background-color: #b7b7b7;
		// box-shadow: 0 0 1em rgba(#b7b7b7, 0.3);
		// color: black;

		display: block;
		font-size: 0.8rem;
		letter-spacing: 0.1em;
		line-height: 4vh;
		text-align: center;
		text-transform: uppercase;
		width: 100%;

		&:disabled {
			cursor: auto;
			opacity: 0.3;
		}

		&:active {
			opacity: 0.8;
		}
	}
}
