.Calculator {
	display: flex;
	flex-direction: column;
	height: 100%;

	--output-height: 20%;
	--button-gap: 0.25rem;
}

.Output {
	display: flex;
	gap: 0.25rem;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	height: var(--output-height);
	padding: 0.5rem;
}

.Calculation, .Preview {
	margin: 0;
}

.Calculation {
	color: var(--foreground-color-2);
	height: 1.25rem;
}

.Preview {
	color: var(--foreground-color-0);
	font-size: 2.5rem;
}

.Input {
	display: flex;
	gap: var(--button-gap);
	flex-direction: column;
	height: calc(100% - var(--output-height));
	padding: 0.5rem;
}

.InputRow {
	flex: 1;
	display: flex;
	gap: var(--button-gap);
}

.Button {
	flex: 1;
	border-radius: var(--border-radius-0);
	font-size: 1.5rem;
}

.InputRow:first-of-type .Button {
	--normal-color: var(--background-color-1);
	--hover-color: var(--background-color-2);
}

.InputRow .Button:last-of-type {
	--text-color: var(--background-color-0);
	--normal-color: var(--blue-0);
	--hover-color: var(--blue-1);
}

.ButtonLarge {
	min-width: calc(50% - var(--button-gap) / 2);
}