#calculator-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

#calculator {
	width: auto;
	height: 100%;
	max-height: 100vh;
}

#calc-btns-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-gap: 4px;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

#calc-display {
	grid-column: 1 / -1;
	grid-row: 1;
	color: var(--color-fg);
	font-family: var(--font-display);
	font-size: 8vmin;
	text-align: right;
	padding: 0.5em;
	view-transition-name: digit;
	display: flex;
	gap: 0.05em;
	/* flex-direction: row-reverse; */
	align-items: center;
	justify-content: flex-end;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(30px);
	}
}

@keyframes slide-to-left {
	to {
		transform: translateX(-30px);
	}
}

@keyframes slide-from-top {
	from {
		transform: translateY(30px);
	}
}

@keyframes slide-to-bottom {
	to {
		transform: translateY(-30px);
	}
}

@keyframes slide-from-bottom {
	from {
		transform: translateY(-30px);
	}
}

@keyframes slide-to-top {
	to {
		transform: translateY(30px);
	}
}

::view-transition-old(display) {
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-bottom;
}

::view-transition-new(display) {
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top;
}

::view-transition-old(display-reverse) {
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
}

::view-transition-new(display-reverse) {
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
}

::view-transition-old(digit) {
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(digit) {
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

.calc-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: color-mix(in srgb, var(--color-bg) 30%, transparent);
	color: var(--color-fg);
	font-family: var(--font-display);
	font-size: 6vmin;
	cursor: pointer;
	transition: background-color 0.25s;

	border-radius: 50%;
	aspect-ratio: 1 / 1;

	&:hover {
		background-color: color-mix(in srgb, color-mix(in srgb, var(--color-bg) 80%, var(--color-fg)) 30%, transparent);
	}

	&:active {
		background-color: color-mix(in srgb, var(--color-bg) 50%, transparent);
	}

	&.operator {
		--col: color-mix(in srgb, var(--color-accent) 70%, var(--color-bg));
		filter: contrast(200%);
		background-color: var(--col);
		color: var(--color-bg);

		&:hover {
			background-color: color-mix(in srgb, var(--col) 85%, transparent);
		}

		&:active {
			background-color: color-mix(in srgb, var(--col) 90%, transparent);
		}
	}

	&.mem {
		--col: color-mix(in srgb, var(--color-accent) 10%, transparent);
		background-color: var(--col);
		/* color: var(--color-bg); */

		&:hover {
			background-color: color-mix(in srgb, var(--col) 85%, transparent);
		}

		&:active {
			background-color: color-mix(in srgb, var(--col) 90%, transparent);
		}
	}

	&[data-value="="],
	&.operator.active {
		background-color: var(--color-accent);
		color: var(--color-bg);
	}

}