/* Vars */
:root {
	--accent: #efa172;
	--accent-fg: white;
	--bg: white;
	--bg-2: #e9e9e9;
	--bg-3: #e0e0e0;
	--fg: black;
	--radius: 24px;
	--radius-small: 12px;
	--outer-radius: var(--radius);
	--outer-padding: 3vh;
	--padding: 24px;
	--shadow: 0 4px 24px rgba(0,0,0,0.2);
	--harsh-shadow: 0 4px 0 rgba(0,0,0,0.1);
	--img-size: 100px;
	--page-width: 1000px;
}

/* Global */
* {
	scrollbar-color: var(--accent) transparent;
}
:not(:hover) {
	scrollbar-color: transparent transparent;
	transition: scrollbar-color .2s;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}
hr {
	width: 90%;
	border: 0;
	border-bottom: 1px solid rgba(100,100,100,0.2);
	margin-block: var(--padding);
}
svg {
	width: 1.2em;
	height: 1.2em;
	vertical-align: bottom;
	margin-inline: 2px;
}
.button {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-fg);
	padding: 12px 24px;
	border-radius: var(--radius-small);
	font-weight: bold;
	border: 0;
	font-size: inherit;
	text-decoration: none;
	box-shadow: var(--harsh-shadow);
	transition: transform .4s cubic-bezier(0,0,0,2.5);
}
.button.muted {
	border-radius: 100px;
	background: var(--bg-2);
	color: var(--fg);
	padding-block: 8px;
	font-size: .8em
}
.button[aria-current] {
	background: black;
	color: white;
}
@media (prefers-reduced-motion: no-preference) {
	.button:hover, .fields > a:hover {
		transform: scale(1.02)
	}
	.button:active, .fields > a:active {
		transform: scale(.97);
		transition: transform .3s cubic-bezier(0,0.2,0,1);
	}
}
.list-row {
	display: flex;
	align-items: center;
}
.list-row > button {
	position: sticky;
	inset: 0;
	margin: 0;
	z-index: 2
}
.row-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: var(--img-size) var(--img-size);
	padding-inline-end: var(--padding);
}

.img-button {
	position: sticky;
	display: flex;
	justify-content: center; /* center tooltips */
	width: var(--img-size);
	height: var(--img-size);
	background: none;
	border: 0;
	border-radius: var(--radius);
	transition: background .1s, border .2s cubic-bezier(0,0.4,0,1.2);
	border: 0px solid var(--bg);
}
.img-button:hover, .img-button:focus {
	background: var(--bg);
	border: 4px solid var(--bg-2);
	z-index: 2;
}
.img-button::after {
	/* tooltips */
	content: attr(aria-label);
	position: absolute;
	bottom: -10px;
	background: var(--accent);
	border-radius: var(--radius-small);
	color: var(--accent-fg);
	padding: 2px 8px;
	opacity: 0;
	font-weight: bold;
	box-shadow: var(--shadow);
	text-transform: capitalize;
	white-space: nowrap;
	transition: opacity .2s;
}
.img-button:hover:after, .img-button:focus:after {
	opacity: 1;
}
.img-button img {
	width: 100%;
	height: 100%;
	filter: drop-shadow(var(--harsh-shadow));
}
.active {
	background: var(--accent) !important;
	right: calc(-2 * var(--padding) - .5 * var(--img-size));
	left: calc(-1 * var(--padding) - .5 * var(--img-size));
	z-index: 1;
}
.active::before {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: 0 4px 24px var(--accent);
	border-radius: inherit;
	opacity: .3;
}

/* Page */
html {
	height: 100%;
}
body {
	background: var(--accent);
	color: var(--accent-fg);
	text-align: center;
	font-family: Cantarell, system-ui;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: var(--outer-padding);
	padding-bottom: calc(var(--outer-padding) * 1.5);
	box-sizing: border-box;
	gap: var(--outer-padding);
	line-height: 1.5;
}
#page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--padding);
	color: var(--accent-fg);
	width: var(--page-width);
	max-width: 100%;
	margin-inline: auto;
	text-align: initial;
	line-height: 1.4;
	box-sizing: border-box;
}
.title {
	color: inherit;
	text-decoration: none;
	margin-block: -5px;
}
.header-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--padding) / 2);
	font-size: 1.2em;
}
h1 {
	font-size: 1.7em;
}
h1 span {
	/* display: inline-block; */
	background: var(--bg);
	color: var(--accent);
	border-radius: calc(var(--radius) / 2);
	padding: 2px 12px;
	vertical-align: 0.05em;
	font-size: .7em;
	transform: scale(.9);
}
#main-panel {
	background: var(--bg-2);
	border-radius: var(--outer-radius);
	display: flex;
	width: 100%;
	max-width: 1600px;
	max-height: 900px;
	margin-inline: auto;
	color: var(--fg);
	height: 0;
	flex-grow: 1;
	overflow-y: auto;
	box-shadow: var(--shadow);
}
main {
	padding: var(--padding);
	margin: auto;
	max-width: var(--page-width);
	text-align: initial;
}
.left-panel, .right-panel {
	max-height: 100%;
	box-sizing: border-box;
}
.left-panel {
	width: 300px;
	flex-grow: 9999;
	text-align: left;
	overflow-y: scroll;
}
.left-panel section {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: var(--padding);
	padding-inline-end: calc(var(--padding) * 2);
	border-bottom: 1px solid rgba(100,100,100,0.1);
	contain: paint inline-size
}
.left-panel section:last-child {
	border-bottom: 0;
}
.left-panel h3 {
	position: sticky;
	left: 0
}
.right-panel {
	border-radius: var(--radius);
	background: var(--bg);
	width: 400px;
	padding: var(--padding);
	overflow-y: auto;
	flex-grow: 1;
	box-shadow: var(--shadow);
}
.preview {
	background: var(--accent);
	border-radius: var(--radius);
	aspect-ratio: 1;
	display: flex;
	z-index: 100;
	margin-bottom: var(--padding);
	box-shadow: var(--harsh-shadow);
}
.preview .container {
	margin: auto;
}
.preview .container img {
	top: 0;
	left: 0;
}

.right-panel section {
	width: 100%;
}
.right-panel h2 {
	font-size: 1em;
}

#controls {
	box-sizing: border-box;
}
#controls #export {
	flex-grow: 1;
}
.random {
	display: flex;
	justify-content: center;
	gap: var(--padding);
	margin-bottom: var(--padding);
}
/* .random svg {
	display: block;
	margin: auto;
} */
label {
	display: flex;
	align-items: center;
	margin: 0;
	gap: 8px;
}
label input:not([type="checkbox"]) {
	margin-inline-start: auto;
}

.neo-list img {
	width: 30px;
	height: 30px;
}

.fields {
	all: unset;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 4px;
	margin-top: 16px;
	margin-bottom: 20px;
	border-radius: var(--radius);
	overflow: hidden;
	text-align: initial;
	/* box-shadow: var(--harsh-shadow); */
	filter: drop-shadow(var(--harsh-shadow));
	line-height: 1.2;
	font-size: .9em;
}
.fields > .field-item,
.fields > a {
	display: block;
	background: var(--bg-2);
	border-radius: 4px;
	padding: calc(var(--padding) / 2) calc(var(--padding) / 1.5);
	flex-grow: 1;
	/* box-shadow: var(--harsh-shadow); */
	text-transform: capitalize;
	font-size: 1em;
	transition: background .2s, color .2s, transform .4s cubic-bezier(0,0,0,2.5);
}
.fields > .field-item > b {
	display: block;
}
.fields > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--padding) / 3);
	line-height: 1;
	transition-duration: 1s;
}
.fields > a:hover,
.fields > a:focus {
	background: var(--accent);
	color: var(--accent-fg);
	transition-duration: 0s;
}
.fields > label:hover,
.fields > label:focus-within {
	background: var(--bg-3);
}
.fields > label.field-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fields input {
	background: none;
	border: none;
	text-align: end;
	font-size: 1em;
}
.fields input[type="text"] {
	width: 120px;
	flex-grow: 1;
}


#export-container {
	position: sticky;
	display: flex;
	flex-direction: column;
	bottom: calc(0px - var(--padding) / 2);
	margin: calc(0px - var(--padding) / 2);
	background: var(--bg-2);
	padding: var(--padding);
	border-radius: var(--radius);
	font-weight: bold;
	margin-top: var(--padding);
	overflow: hidden;
	box-shadow: var(--harsh-shadow);
	border: 1px solid rgba(100,100,100,0.1);
	animation: jumpFromBottom .4s cubic-bezier(0,0.7,0,1.2);
}
#export-container img {
	height: 150px;
	width: 100%;
	object-fit: contain;
	margin-bottom: calc(var(--padding) / 2);
}
#export-container a {
	border-radius: 100px;
	word-break: break-word;
	margin-top: calc(var(--padding) / 2);
	color: inherit;
}


@media (max-width: 1000px) {
	:root {
		--outer-padding: 0;
	}
	body {
		display: block;
		padding-bottom: 20px;
		height: unset;
	}
	#page-header {
		position: relative;
		text-align: center;
		flex-direction: column;
		padding: 60px 20px;
		z-index: 10;
	}
	.mixer-page #page-header {
		padding-bottom: 120px;
	}
	.title {
		font-size: 1em;
	}
	#main-panel {
		flex-direction: column;
		height: unset;
		max-height: unset;
		align-items: center;
		overflow: visible;
		box-shadow: none;
	}
	.left-panel, .right-panel {
		width: 100%;
		overflow: visible;
		height: unset;
		max-height: unset;
	}
	.right-panel {
		display: contents;
	}
	.information {
		background: var(--bg);
		padding: var(--padding);
		margin-top: 20px;
		border-radius: var(--radius);
	}
	.random {
		margin-bottom: 0;
		gap: calc(var(--padding) / 2);
	}
	#random {
		font-size: 0;
	}
	#random svg {
		font-size: 1.2rem;
	}
	.preview {
		position: sticky;
		order: -1;
		top: 15px;
		margin-top: -80px;
		margin-bottom: -100px;
		padding: 24px;
		height: 300px;
		width: 100%;
		box-sizing: border-box;
		transform: scale(.5);
		transform-origin: top center;
		margin-inline: auto;
		box-shadow: var(--shadow);
		background: var(--bg);
	}
	/* create header rounded corners & shadow */
	.mixer-page #main-panel::before {
		content: "";
		display: block;
		position: sticky;
		top: 95px;
		width: 100%;
		height: 200px;
		margin-top: -120px;
		margin-bottom: -120px;
		background: none;
		border-radius: var(--radius) var(--radius) 0 0;
		box-shadow: 0 -150px 0 var(--accent), inset var(--harsh-shadow);
		z-index: 2;
		pointer-events: none;
	}
}




@keyframes jumpFromBottom {
	from {
		transform: translateY(50px);
		opacity: 0;
	}
}