@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

/* * VARIABLES */

/* :root {
	--body-bg: #fff9f3;
} */

/* * LAYOUT */
body {
	background-color: var(--body-bg);
	color: var(--color-primary);
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	transition: 300ms ease-in-out;
}

.calculator {
	margin-inline: auto;
	margin-block: max(2rem, 7%);
	max-width: min(80%, 400px);
	background-color: var(--calculator-bg);
	background-image: var(--calculator-bg);
	aspect-ratio: 1/1.55;
	border-radius: 1rem;
	box-shadow: 4px 10px 15px 0px rgba(0, 0, 0, 0.3);
	user-select: none;
}

.calculator-content {
	padding: 10% 10%;
	display: grid;
	grid-template-rows: 2fr 5fr;
}

.flex-end-flow {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

.buttons {
	margin-top: 5px;
	font-size: 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.button {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	cursor: pointer;
}

/* * COLORS */

.accent {
	color: var(--color-accent);
}

/* * CALCULATIONS */

.display {
	border-bottom: 2px solid var(--color-accent);
	overflow: hidden;
}

.calculation {
	font-size: 1.2rem;
	font-weight: 500;
	text-align: right;
	max-width: 35ch;
	max-height: 3em;
	overflow: hidden;
}

.input {
	font-size: 4rem;
	height: 5.5rem;
	max-width: 8ch;
}

/* * BUTTONS */

.eval-button-wrapper {
	display: grid;
	place-items: center;
}
.button[data-button="="] {
	color: var(--color-equal, --color-primary);
	width: 65%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-accent);
	display: grid;
	box-shadow: 3px 5px 10px 3px var(--color-equal-shadow);
	transition: 100ms ease-in-out;
}

.button[data-button="Backspace"] {
	fill: var(--color-accent);
}

/* * BUTTON EFFECTS */

/* ? PRIMARY HOVER/ACTIVE */
.button-primary {
	transition: 50ms ease-in;
}
.button-primary:hover,
.button-primary:active {
	border-radius: 1rem;
	background-color: var(--color-primary-hover);
}
.button-primary:active {
	background-color: var(--color-primary-active);
	box-shadow: inset 0 0 10px var(--color-button-primary-inset);
}

/* ? SECONDARY HOVER/ACTIVE */
.button-secondary {
	transition: 100ms ease-in;
}
.button-secondary:hover,
.button-secondary:active {
	border-radius: 1rem;
	background-color: var(--color-secondary-hover);
}
.button-secondary:active {
	background-color: var(--color-secondary-active);
	color: var(--color-primary);
	box-shadow: inset 0 0 10px var(--color-button-secondary-inset);
}

/* ? CUSTOM BUTTON HOVER/ACTIVE */
.button[data-button="Backspace"]:hover {
	fill: var(--color-backspace-hover);
}
.button[data-button="Backspace"]:active {
	fill: var(--color-backspace-active);
}
#backspace-svg {
	fill: inherit;
}

.button[data-button="="]:hover {
	width: 75%;
	scale: 1.1;
	box-shadow: none;
}
.button[data-button="="]:active {
	background-color: var(--color-equal-bg-active);
	color: var(--color-accent);
	box-shadow: inset 0 0 20px var(--color-equal-active);
}

/* ! THEMES */

.theme-orange {
	--body-bg: #fff9f3;
	--calculator-bg: linear-gradient(
		150deg,
		rgba(255, 191, 73, 1) 30%,
		rgba(255, 181, 47, 1) 60%,
		rgba(239, 164, 27, 1) 100%
	);

	--color-primary: hsl(32, 100%, 97%);
	--color-accent: hsl(28, 75%, 33%);
	--color-accent-raw: 28, 75%, 33%;

	--color-button-primary-raw: 39, 100%, 49%;
	--color-primary-hover: hsl(var(--color-button-primary-raw), 50%);
	--color-primary-active: hsl(var(--color-button-primary-raw));
	--color-button-primary-inset: hsl(39, 100%, 36%, 60%);

	--color-secondary-hover: hsl(var(--color-accent-raw), 20%);
	--color-secondary-active: var(--color-accent);
	--color-button-secondary-inset: hsl(0, 0%, 0%, 30%);

	--color-equal-bg-active: transparent;
	--color-equal-shadow: hsla(var(--color-accent-raw), 0.5);
	--color-equal-active: hsla(var(--color-accent-raw), 0.8);
	--color-backspace-hover: rgba(0, 0, 0, 70%);
	--color-backspace-active: rgba(0, 0, 0, 80%);
}

.theme-dark {
	--body-bg: #fff9f3;
	--calculator-bg: hsl(199, 24%, 23%);

	--color-primary: hsl(32, 86%, 92%);
	--color-accent: hsl(12, 100%, 64%);
	--color-accent-raw: 12, 100%, 64%;

	--color-button-primary-raw: 199, 25%, 15%;
	--color-primary-hover: hsl(var(--color-button-primary-raw), 50%);
	--color-primary-active: hsl(var(--color-button-primary-raw));
	--color-button-primary-inset: hsl(199, 25%, 5%, 60%);

	--color-secondary-hover: hsl(var(--color-accent-raw), 25%);
	--color-secondary-active: var(--color-accent);
	--color-button-secondary-inset: hsl(12, 100%, 29%);

	--color-equal-bg-active: var(--color-primary);
	--color-equal-shadow: hsla(var(--color-accent-raw), 0.4);
	--color-equal-active: hsla(var(--color-accent-raw), 0.2);
	--color-backspace-hover: rgba(0, 0, 0, 70%);
	--color-backspace-active: rgba(0, 0, 0, 80%);
}

.theme-light {
	--body-bg: #fff9f3;
	--calculator-bg: linear-gradient(
		150deg,
		hsl(0, 0%, 100%) 30%,
		hsl(0, 100%, 99%) 80%,
		hsl(0, 16%, 90%) 100%
	);

	--color-primary: hsl(199, 24%, 24%);
	--color-accent: hsl(12, 100%, 64%);
	--color-accent-raw: 12, 100%, 64%;

	--color-button-primary-raw: 199, 24%, 24%;
	--color-primary-hover: hsl(var(--color-button-primary-raw), 10%);
	--color-primary-active: hsl(var(--color-button-primary-raw), 25%);
	--color-button-primary-inset: hsl(199, 25%, 5%, 30%);

	--color-secondary-hover: hsl(var(--color-accent-raw), 40%);
	--color-secondary-active: var(--color-accent);
	--color-button-secondary-inset: hsla(12, 100%, 29%, 40%);

	--color-equal: hsl(0, 100%, 99%);
	--color-equal-bg-active: var(--color-primary);
	--color-equal-shadow: hsla(var(--color-accent-raw), 0.5);
	--color-equal-active: hsla(var(--color-accent-raw), 0.2);
	--color-backspace-hover: hsla(5, 100%, 64%);
	--color-backspace-active: hsl(0, 100%, 58%);
}

/* TODO: MISSING THEMES?
#theme-red {
}
#theme-beige {
}
#theme-green {
} */

/* ! THEME PICKER */

.visually-hidden {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.appearance-picker > fieldset {
	display: flex;
	gap: 2rem;
	width: fit-content;
	margin-inline: auto;
	padding: 1rem 3rem;
	background-color: hsla(0, 100%, 90%, 0.76);
	border: 2px solid hsl(60, 56%, 91%);
	border-radius: 0 0 2rem 2rem;
}

.appearance-picker input[type="radio"] {
	appearance: none;
	width: 1.25rem;
	aspect-ratio: 1;
	outline: 2px solid var(--radio-color);
	outline-offset: 2px;
	border-radius: 50%;
	transition: 200ms linear;
}

.appearance-picker input[type="radio"]:checked {
	background-color: var(--radio-color);
	border-radius: 25%;
}

input[type="radio"]#light {
	--radio-color: rgb(255, 255, 255);
}
input[type="radio"]#dark {
	--radio-color: hsl(199, 24%, 24%);
}
input[type="radio"]#orange {
	--radio-color: rgba(255, 181, 47, 1);
}