// ============================================================================
// :: Menu Background
// ============================================================================
.a-menu-background {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: $z-index-highest;

	width: 7.5rem;
	height: 7.5rem;

	background: $gradient-primary;
	border-top-left-radius: 100%;

	transition:
		width 0.3s ease-in-out,
		height 0.3s ease-in-out,
		border-top-left-radius 0.3s ease-in-out,
		transform 0.3s ease-in-out;

	@include respond-at($screen-medium-base) {
		display: none;
	}
}

// ============================================================================
// :: States
// ============================================================================
.a-menu-background {

	&.is-open {
		z-index: $z-index-highest - 1;

		width: 100vw;
		height: 100vh;

		transition:
			width 0.3s ease-in-out,
			height 0.3s ease-in-out,
			border-top-left-radius 0.3s ease-in-out 0.2s,
			transform 0.3s ease-in-out;
		border-top-left-radius: 0;
	}

	&.is-hidden {
		transform: translateX(10rem) translateY(10rem) scale(0.9);
	}
}