*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	/* color base */
	--color-gray-100: #1f2523;
	--color-gray-200: #4d5c57;
	--color-gray-300: #cdd5d2;
	--color-gray-400: #e4ece9;
	--color-gray-500: #f9fbfa;
	--color-white: #ffffff;

	/* color product */
	--color-green-100: #1f8459;
	--color-green-200: #2cb178;
	--color-danger: #b51919;

	/* text */
	--font-family: "Open Sans", sans-serif;
	--text-heading-lg: 700 1.25rem/1.5rem var(--font-family);
	--text-heading-md: 700 1rem/1.25rem var(--font-family);
	--text-heading-sm: 700 0.875rem/1.125rem var(--font-family);
	--text-subheading: 600 0.875rem/1.125rem var(--font-family);
	--text-body-lg-reg: 400 1rem/1.25rem var(--font-family);
	--text-body-lg-bd: 700 1rem/1.25rem var(--font-family);
	--text-body-md-reg: 400 1rem/1.125rem var(--font-family);
	--text-body-md-bd: 700 0.875rem/1.125rem var(--font-family);
	--text-body-sm: 400 0.75rem/1rem var(--font-family);
	--text-label-reg: 400 var(--font-family);
	--text-label-bd: 700 var(--font-family);
}

input,
button,
select {
	box-sizing: border-box;
	all: unset;
	cursor: pointer;
}

html,
body {
	overflow: hidden;

	font: var(--text-body-md-reg);
	color: var(--color-gray-100);
	background-color: var(--color-gray-500);

	height: 100vh;
	height: 100dvh;
}

body {
	padding: 2rem 0rem 2rem 0rem;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

label {
	font: var(--text-label-reg);
	color: var(--color-gray-200);
}

main {
	margin-top: 0.25rem;
	margin-inline: auto;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 1rem;

	height: 100%;
	padding-bottom: 4rem;
}

#header {
	text-align: left;
}

.container {
	width: 23.4375rem;
	margin-inline: auto;
}

.input-wrapper {
	min-height: 4.375rem;
	width: 100%;

	display: flex;
	flex-direction: column;

	justify-content: space-between;

	& .input-inner {
		height: 3rem;
		width: 100%;

		padding-inline: 1rem;

		border: 1px solid var(--color-gray-300);
		border-radius: 0.5rem;

		align-content: center;

		&:focus-within {
			border-color: var(--color-gray-200);
		}

		& > input,
		& > select {
			font: var(--text-body-md-reg);
			color: var(--color-gray-200);

			width: 100%;
			height: 100%;
			align-items: center;
		}
	}
}

.box {
	padding-block: 1.25rem;
	padding-inline: 0.75rem;

	background-color: var(--color-white);
	border-radius: 0.5rem;
}

.request {
	flex: 1.5;

	/* width: 100%; */
	& header {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;

		& > span {
			font: var(--text-heading-lg);
			color: var(--color-gray-100);
		}

		& > p {
			font: var(--text-body-md-reg);
			color: var(--color-gray-200);
		}
	}

	& form {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		margin-top: 2.5rem;

		& > div:nth-child(2) {
			width: 100%;
			display: flex;
			flex-direction: row;
			gap: 1rem;
		}
	}

	& input[type="submit"] {
		background-color: var(--color-green-100);

		height: 3rem;
		width: 100%;

		border-radius: 0.5rem;
		margin-top: 1rem;

		color: var(--color-white);
		font: var(--text-body-md-bd);

		text-align: center;

		transition: background-color 200ms ease;

		&:active {
			background-color: var(--color-green-200);
		}
	}
}

.history {
	flex: 2;

	width: 100%;
	max-height: 100%;

	display: flex;
	flex-direction: column;

	overflow: hidden;
	min-height: 0;

	& header {
		background-color: var(--color-white);
		border-radius: 0.5rem 0.5rem 0 0;

		& .summary {
			display: flex;
			flex-direction: row;
			gap: 0.5rem;

			align-items: baseline;

			padding-bottom: 1.5rem;
			border-bottom: 1px solid var(--color-gray-400);

			& span:nth-child(1) {
				font: var(--text-body-lg-reg);
				color: var(--color-gray-200);
			}

			& label {
				margin-right: auto;
			}

			& .total {
				& span:nth-child(1) {
					font: var(--text-body-sm);
					color: var(--color-gray-200);
				}
				& span:nth-child(2) {
					font: var(--text-heading-md);
					color: var(--color-gray-100);
				}
			}
		}
	}

	& .item-list {
		background-color: var(--color-white);
		border-radius: 0 0 0.5rem 0.5rem;

		width: 100%;

		overflow-y: auto;

		& ul {
			display: flex;
			flex-direction: column;
		}

		.item {
			display: flex;
			flex-direction: row;

			margin-bottom: 1rem;
			border-radius: 0.5rem;
			padding: 0.25rem;

			gap: 0.75rem;

			align-items: center;

			animation: fadeIn 0.3s ease forwards, fadeHighlight 1.5s ease forwards;

			opacity: 0;

			& div:nth-child(2) {
				margin-right: auto;

				display: flex;
				flex-direction: column;
				align-items: start;

				& span:nth-child(1) {
					font: var(--text-heading-sm);
					color: var(--color-gray-100);
				}
				& span:nth-child(2) {
					font: var(--text-body-sm);
					color: var(--color-gray-200);
				}
			}
			& div:nth-child(3) {
				& span:nth-child(1) {
					font: var(--text-body-sm);
					color: var(--color-gray-200);
				}
				& span:nth-child(2) {
					font: var(--text-subheading);
					color: var(--color-gray-100);
				}
			}
			& button:nth-child(4) {
				display: flex;
			}
		}
	}
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 1.5;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeHighlight {
	0% {
		background-color: var(--color-green-200);
	}
	100% {
		background-color: #ffffff;
	}
}

@media (width >= 80em) {
	.container {
		width: 60rem;
	}

	#header {
		margin-top: 1rem;
	}

	main {
		flex-direction: row;
		height: 50%;

		margin-top: 2rem;
	}
}