:root {
	--brand-amber: #ffae0e;
	--brand-green: #39c66c;
	--brand-red--: #e82425;
	--brand-white: #ffffff;
	--brand-black: #000000;

	--type-family: "Poppins", sans-serif;
	--type-basis: 14px / 140%;
	--type-title: 36px / 48px;
	--type-label: 18px / 150%;

	--strata-tooltip: calc(1e5);
}

@layer Reset {
	*:not(title, style, script),
	*::before,
	*::after {
		box-sizing: border-box;
		display: block;
		margin: 0;
		padding: 0;
	}
}

@layer General {
	html {
		font: 500 var(--type-basis) var(--type-family);

		& .title {
			font: 700 var(--type-title) var(--type-family);
		}

		& .label {
			font: 700 var(--type-label) var(--type-family);
		}

		& .body {
			font: inherit;
		}

		& .type--regular {
			font-weight: 400;
		}

		& span {
			display: inline;
		}
	}
}

@layer Main {
	body {
		height: 100lvh;

		&,
		& main {
			display: grid;
			grid-template-areas: "box";
		}
	}

	main {
		grid-area: box;
		position: relative;
		margin-block: 5lvh;
		margin-inline: auto;
		width: 100%;
		max-width: 1000px;
		border-radius: 20px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

		@media print {
			& {
				margin-block: 0;
				margin-inline: auto;
			}
		}

		& > aside,
		& article.entry .wrapper--work,
		& article.entry aside {
			& button {
				position: relative;
				cursor: pointer;
				display: grid;
				grid-template-areas: "box";
				border: none;
				color: var(--brand-black);
				background-color: transparent;
				transition: opacity 250ms ease-in-out;

				&::after {
					content: "";
					display: block;
					position: absolute;
					inset: -2px;
					pointer-events: none;
					border: 2px solid var(--brand-black);
					border-radius: 100%;
					opacity: 0;
					transition: opacity 250ms ease-in-out;
				}

				&:hover {
					opacity: 0.7;
				}

				&:active {
					opacity: 0.85;
				}

				&:focus-visible {
					outline: 0px solid transparent;

					&::after {
						opacity: 1;
					}
				}

				& svg {
					grid-area: box;
					height: auto;
				}
			}
		}

		& > aside {
			position: absolute;
			inset-block-start: 0;
			inset-block-end: 0;
			inset-inline: 0;
			display: grid;
			row-gap: 10px;
			pointer-events: none;

			& > .left,
			& > .right {
				display: flex;
				flex-direction: column;
				place-items: start;
				row-gap: 10px;
				inset-block: 0;
				pointer-events: all;
			}

			& > .left {
				position: absolute;
				inset-inline-end: calc(100% + 20px);
			}

			& > .right {
				position: absolute;
				inset-inline-start: calc(100% + 20px);
			}

			& #app-version {
				position: absolute;
				inset-block-start: calc(100% + 10px);
				inset-inline-end: 10px;
			}

			& button.inverse.inverse {
				color: var(--brand-white);
				background-color: var(--brand-black);
				padding: 10px;
				border-radius: 100%;
				box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);

				&:focus-visible {
					border: none;
					outline: 2px solid var(--brand-black);
					outline-offset: 4px;
				}

				& svg {
					width: 32px;
					aspect-ratio: 1 / 1;
				}

				&.warning {
					background-color: var(--brand-amber);
				}

				&.danger {
					background-color: var(--brand-red--);
				}
			}

			@media print {
				& {
					display: none;
				}
			}
		}

		&:has(#invoice.printing) {
			box-shadow: none;

			& article.entry {
				& aside {
					display: none !important;
				}
			}
		}

		&:has(#invoice--part-reset:hover),
		&:has(#invoice--part-reset:focus-visible) {
			& #invoice .invoice--body::after {
				opacity: 1;
			}
		}

		&:has(#invoice--full-reset:hover),
		&:has(#invoice--full-reset:focus-visible) {
			& #invoice::after {
				opacity: 1;
			}

			& #invoice .invoice-uuid::after {
				opacity: 1;
			}
		}
	}

	#invoice {
		position: relative;
		grid-area: "box";
		padding: 100px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-gutter: stable;

		&.printing {
			background-color: var(--brand-white);
		}

		& input,
		& textarea {
			border: none;
			color: var(--brand-black);
			background-color: transparent;

			&:focus-visible {
				outline: none;
			}
		}

		& label {
			position: relative;

			& .input--label {
				position: absolute;
				color: transparent;
				pointer-events: none;
			}
		}

		& input {
			width: 100%;
			max-width: 100%;

			&.input--title {
			}

			&.input--person {
				text-align: right;
			}
		}

		& textarea {
			resize: none;
		}

		& .column--id {
			grid-area: id;
			width: 28px;
			text-align: center;
		}

		& .column--name {
			grid-area: name;
		}

		& .column--price {
			grid-area: price;

			& input {
				text-align: right;
			}
		}

		& .column--quantity {
			grid-area: quantity;

			& input {
				text-align: center;
			}
		}

		& .column--total {
			grid-area: total;
			font-weight: 700;
			place-self: end;
		}

		& > header {
			display: grid;
			row-gap: 10px;
			padding-block-end: 30px;
			border-block-end: 4px solid var(--brand-black);

			& .invoice-uuid {
				position: relative;

				&::after {
					display: block;
					content: "";
					position: absolute;
					inset-block: -2px;
					inset-inline-start: -18px;
					inset-inline-end: -6px;
					border-radius: 10px;
					pointer-events: none;
					opacity: 0;
					background: repeating-linear-gradient(
							-45deg,
							var(--brand-green) 0px,
							var(--brand-green) 0.5px,
							transparent 0.5px,
							transparent 4px
						),
						rgba(57, 198, 108, 0.2);
					transition: opacity 250ms ease-in-out;
				}
			}

			& .disclamer {
				padding-block-start: 20px;
			}
		}

		& .invoice--body {
			position: relative;
			padding-block-start: 20px;

			& header,
			& .work {
				display: grid;
				grid-auto-flow: column;
				grid-auto-columns: 1fr;

				& > .left,
				& > .right {
					display: flex;
				}

				& > .left {
					column-gap: 20px;
					justify-content: start;
				}

				& > .right {
					column-gap: 40px;
					justify-content: end;
				}
			}

			& > .wrapper--entry {
				display: grid;
				row-gap: 20px;
				padding-block: 20px;

				& > article.entry {
					--space-block-end: 20px;

					position: relative;
					display: grid;
					row-gap: 5px;

					&:hover,
					&:focus-within,
					&.sortable-ghost {
						& aside {
							opacity: 1;
						}
					}

					&:last-of-type {
						--space-block-end: 0px;
					}

					&:not(:last-of-type) {
						padding-block-end: var(--space-block-end);
						border-block-end: 2px solid var(--brand-black);

						& aside .entry--reorder {
							opacity: 1;
						}
					}

					& .wrapper--work {
						display: grid;
						row-gap: 5px;

						& .work {
							& .left {
								display: grid;
								grid-template-areas: "id name";
								grid-template-columns: 28px 1fr;
							}

							& .right {
								display: grid;
								column-gap: 40px;
								grid-template-areas: "price quantity total";
								grid-template-columns: 52px 37px 58px;
								text-align: right;
							}

							& .entry--rem-work {
								opacity: 0;
								transition: opacity 250ms ease-in-out;

								& svg {
									width: 100%;
									height: 1.5em;
								}

								&::after {
									inset-block-start: -3px;
									inset-block-end: -1px;
									inset-inline: 1px;
								}
							}

							&:hover,
							&:focus-within {
								& .entry--rem-work {
									opacity: 1;
								}
							}

							&:only-of-type {
								& .entry--rem-work {
									display: none;
								}
							}
						}

						& > .column--total {
							position: absolute;
							grid-area: unset;
						}
					}

					& aside {
						opacity: 0;
						position: absolute;
						inset-block-start: 0;
						inset-inline: 0;
						display: flex;
						justify-content: space-between;
						align-items: start;
						transition: opacity 250ms ease-in-out;
						pointer-events: none;

						& .left,
						& .right {
							position: absolute;
							pointer-events: all;

							display: grid;
							align-items: center;
							grid-template-columns: repeat(2, 1fr);
						}

						& .left {
							inset-inline-end: 100%;
							inset-block-start: -8px;
						}

						& .right {
							inset-inline-start: 100%;
						}

						& .entry--add-below,
						& .entry--rem-entry {
							& svg {
								width: 28px;
								aspect-ratio: 1 / 1;
							}
						}

						& .entry--add-inside {
							& svg {
								width: 48px;
								height: 44px;
							}

							&::after {
								border-radius: 100lvw;
								inset-block: 5px;
								inset-inline: -1px;
							}
						}

						& .entry--reorder {
							border-radius: 100lvw;
							color: var(--brand-white);
							background-color: var(--brand-black);
							display: grid;
							place-items: center;
							position: absolute;
							inset-inline-start: 2px;
							inset-block-start: 40px;
							opacity: 1;
							pointer-events: all;
							transition: opacity 250ms ease-in-out;
							cursor: pointer;

							& svg {
								width: 24px;
								height: 32px;
							}

							&:hover {
								opacity: 0.6;
							}
						}

						@media print {
							& {
								display: none;
							}
						}
					}

					&::after {
						--space-inset-offset: -8px;
						--space-block-end-offset: var(--space-inset-offset);

						content: "";
						position: absolute;
						display: block;
						inset-block-start: var(--space-inset-offset);
						inset-block-end: calc(var(--space-block-end-offset, 0px) + var(--space-block-end, 0px));
						inset-inline-start: calc(var(--space-inset-offset) / 2);
						inset-inline-end: var(--space-inset-offset);
						opacity: 0;
						pointer-events: none;
						border-radius: 6px;
						border: 2px solid var(--brand-green);
						background: repeating-linear-gradient(
								-45deg,
								var(--brand-green) 0px,
								var(--brand-green) 2px,
								transparent 2px,
								transparent 20px
							),
							rgba(57, 198, 108, 0.2);
						transition: opacity 250ms ease-in-out;
					}

					&.sortable-ghost {
						pointer-events: none;

						&::after {
							opacity: 1;
						}
					}

					&:only-of-type {
						& aside {
							& .right {
								display: none;
							}

							& .entry--reorder {
								opacity: 0;
								pointer-events: none;
							}
						}
					}
				}
			}

			&::after {
				display: block;
				content: "";
				position: absolute;
				inset: -20px;
				border: 2px solid var(--brand-amber);
				border-radius: 10px;
				pointer-events: none;
				opacity: 0;
				transition: opacity 250ms ease-in-out;
			}
		}

		& > footer {
			position: relative;
			padding-block-start: 20px;
			border-block-start: 4px solid var(--brand-black);

			& .final {
				display: grid;
				margin-block-end: 20px;
				margin-inline-start: auto;
				max-width: max-content;
				padding-block-end: 20px;
				border-block-end: 4px solid var(--brand-black);

				& .right {
					display: grid;
					column-gap: 40px;
					grid-template-areas: "price quantity total";
					grid-template-columns: 52px 37px 58px;
					text-align: right;
				}
			}

			& .account {
				display: grid;
				row-gap: 5px;
				max-width: 85%;

				& .line {
					display: grid;
					column-gap: 20px;
					align-items: center;
					grid-template-columns: 63px 1fr;
				}

				& input {
					font-weight: 700;
				}
			}

			& .goodbye {
				position: absolute;
				inset-block-end: 0;
				inset-inline-end: 0;
			}
		}

		&::after {
			display: block;
			content: "";
			position: absolute;
			inset: 20px;
			border: 2px solid var(--brand-red--);
			border-radius: 10px;
			pointer-events: none;
			opacity: 0;
			transition: opacity 250ms ease-in-out;
		}
	}

	#invoice--full-reset {
		margin-block-start: auto;
	}

	.grid-2 {
		display: grid;
		column-gap: 20px;
		grid-template-columns: repeat(2, 1fr);

		&.grid-half-rest {
			grid-template-columns: 0.5fr 1fr;
		}
	}

	.space-apart {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& :first-child {
			text-align: start;
		}

		& :last-child {
			text-align: end;
		}
	}

	.tooltip {
		position: absolute;
		width: 200px;
		top: 0;
		left: 0;
		z-index: var(--strata-tooltip);

		color: var(--brand-white);
		background-color: var(--brand-black);
		border-radius: 6px;
		padding: 8px 12px;

		opacity: 0;
		pointer-events: none;
		transition: opacity 250ms ease-in-out;

		& .arrow {
			position: absolute;
			background: var(--brand-black);
			width: 10px;
			height: 10px;
			transform: rotate(45deg);
		}
	}
}