.content {
	min-height: var(--content-height);
	width: clamp(100px, 100%, 400px);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;

	.title {
		color: var(--color-primary);

		p {
			text-align: justify;
			font-size: 0.9rem;
			opacity: 0.9;
			padding: var(--spacing);
		}
	}

	.sub-text {
		text-align: center;
		font-size: 0.85rem;
		opacity: 0.8;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-double);

		&:has(#setting-active:not(:checked)) .advanced-settings {
			display: none;
		}

		.action-container {
			display: flex;
			gap: var(--spacing) 0.125rem;
			justify-content: space-between;
			padding: var(--spacing-double);

			.button--max {
				flex: 1 1 auto;
				font-size: 1.25rem;
			}

			.button--min {
				flex: 0 0 var(--min-size);
				min-height: var(--size-min);
			}
		}

		.parameters {
			border: var(--size-border) solid var(--color-primary);
			border-radius: var(--spacing);

			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			gap: var(--spacing);

			&.advanced-settings {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.label--stated {
		input {
			display: none;
		}

		flex: 0 1 100px;

		display: flex;
		align-items: center;
		justify-content: center;

		padding: var(--spacing);
		border: var(--size-border) solid var(--color-primary);
		text-align:center;

		border-radius: var(--spacing);

		color: var(--color-primary);
		background-color: var(--color-foreground);

		&:has(:checked) {
			border-color: blue;
			box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
		}
	}



	.crystal-ball-container {
		position: relative;
		width: 100%;
		min-height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		&:has([data-color="crystal-ball--parchment"]){
			flex-direction: column-reverse;
		}
	}

	.crystal-ball {
		--_depth_edges: 60px;
		--_depth_outline: 90px;
		--_font-color: #ffffffcc;
		--_shine-color-background: hsla(0, 0%, 0%, 0.25);
		--_shine-color-left: hsla(0, 0%, 100%, 0.05);
		--_shine-color-right: hsla(0, 0%, 0%, 0.05);

		--_crystal-glow-color-00: #a0e9a0;
		--_crystal-glow-color-25: #5cb85c;
		--_crystal-glow-color-60: #2e8b57;
		--_crystal-glow-color-90: #004d00;
		--_crystal-glow-color-100: #000000;

		position: relative;
		max-width: 300px;
		width: 100%;
		aspect-ratio: 1;
		border-radius: 50%;
		color: var(--_font-color);
		background: radial-gradient(circle at 30% 30%,
				var(--_crystal-glow-color-00),
				/* A very light, almost white green for the highlight */
				var(--_crystal-glow-color-25) 25%,
				/* A lighter green for the bright area */
				var(--_crystal-glow-color-60) 60%,
				/* A darker green for the mid-tone */
				var(--_crystal-glow-color-90) 90%,
				/* A very dark green for the deep shadow */
				var(--_crystal-glow-color-100) 100%
				/* A pure black or very dark color for the outer edge shadow */
			);
		/* animation: rotateColor 2s infinite; */
		animation: pulseAura 3s ease-in-out infinite;
		box-shadow:
			inset 0 20px var(--_depth_outline) var(--_shine-color-background),
			inset 20px 0 var(--_depth_edges) var(--_shine-color-left),
			inset -20px 0 var(--_depth_edges) var(--_shine-color-right),

			/* inset 20px 0 20px var(--_shine-color-left), */
			/* inset -20px 0 20px var(--_shine-color-right),  */

			/* Outer aura - multiple layers for realistic glow */
			0 0 20px var(--_crystal-glow-color-25),
			0 0 40px var(--_crystal-glow-color-60),
			0 0 60px var(--_crystal-glow-color-60),
			0 0 80px var(--_crystal-glow-color-90),

			/* Directional glows */
			-10px 0 var(--_depth_edges) var(--_shine-color-left),
			10px 0 var(--_depth_edges) var(--_shine-color-right);

		background-blend-mode: screen;
		overflow: hidden;
		&[data-color="crystal-ball--parchment"]{
			--_font-color: var(--color-primary);
			--_crystal-glow-color-00: hsl(39, 70%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(39, 70%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(39, 70%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(39, 70%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(39, 70%, 5%, 0.4);

			border-radius: 0;
			& .name-display {
				font-size: inherit;
				text-align: justify;
			}
		}

		&[data-color="crystal-ball--dark-blue"]{
			--_crystal-glow-color-00: hsl(240, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(240, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(240, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(240, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(240, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--red"]{
			--_crystal-glow-color-00: hsl(0, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(0, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(0, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(0, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(0, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--aqua"]{
			--_crystal-glow-color-00: hsl(200, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(200, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(200, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(200, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(200, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--indigo"]{
			--_crystal-glow-color-00: hsl(255, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(255, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(255, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(255, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(255, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--pink"]{
			--_crystal-glow-color-00: hsl(293, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(293, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(293, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(293, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(293, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--dark-green"]{
			--_crystal-glow-color-00: hsl(115, 60%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(115, 60%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(115, 60%, 20%, 0.4);
			--_crystal-glow-color-90: hsl(115, 60%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(115, 60%, 5%, 0.4);
		}

		&[data-color="crystal-ball--green"]{
			--_font-color: hsla(98, 100%, 24%, 0.8);
			--_crystal-glow-color-00: hsl(115, 93%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(115, 93%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(115, 93%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(115, 93%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(115, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--olive"]{
			--_font-color: #A0522Dcc;
			--_crystal-glow-color-00: hsl(80, 50%, 80%, 0.4);
			--_crystal-glow-color-25: hsl(80, 50%, 50%, 0.4);
			--_crystal-glow-color-60: hsl(80, 50%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(80, 50%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(80, 50%, 5%, 0.4);
		}

		&[data-color="crystal-ball--blue"]{
			--_font-color: #00008Bcc;
			--_crystal-glow-color-00: hsl(193, 59%, 92%, 0.4);
			--_crystal-glow-color-25: hsl(209, 54%, 63%, 0.4);
			--_crystal-glow-color-60: hsl(212, 67%, 36%, 0.4);
			--_crystal-glow-color-90: hsl(211, 69%, 16%, 0.4);
			--_crystal-glow-color-100: hsl(209, 93%, 5%, 0.4);
		}

		&[data-color="crystal-ball--purple"]{
			--_crystal-glow-color-00: hsl(275, 52%, 94%, 0.4);
			--_crystal-glow-color-25: hsl(275, 59%, 74%, 0.4);
			--_crystal-glow-color-60: hsl(276, 44%, 45%, 0.4);
			--_crystal-glow-color-90: hsl(279, 40%, 28%, 0.4);
			--_crystal-glow-color-100: hsl(282, 70%, 13%, 0.4);
		}

		&[data-color="crystal-ball--teal"]{
			--_crystal-glow-color-00: hsl(169, 70%, 89%, 0.4);
			--_crystal-glow-color-25: hsl(185, 58%, 58%, 0.4);
			--_crystal-glow-color-60: hsl(180, 66%, 30%, 0.4);
			--_crystal-glow-color-90: hsl(180, 75%, 17%, 0.4);
			--_crystal-glow-color-100: hsl(180, 90%, 8%, 0.4);
		}

		&[data-color="crystal-ball--gold"]{
			--_font-color: #4f2d0a;
			--_crystal-glow-color-00: hsl(48, 100%, 95%, 0.4);
			--_crystal-glow-color-25: hsl(47, 85%, 79%, 0.4);
			--_crystal-glow-color-60: hsl(33, 67%, 51%, 0.4);
			--_crystal-glow-color-90: hsl(26, 73%, 32%, 0.4);
			--_crystal-glow-color-100: hsl(30, 78%, 17%, 0.4);
		}

		&[data-color="crystal-ball--white"]{
			--_font-color: #000000cc;
			--_crystal-glow-color-00: rgba(255, 255, 255, 0);
			--_crystal-glow-color-25: rgba(255, 255, 255, 0.25);
			--_crystal-glow-color-60: rgba(255, 255, 255, 0.6);
			--_crystal-glow-color-90: rgba(255, 255, 255, 0.9);
			--_crystal-glow-color-100: rgba(255, 255, 255, 1);
		}

		&[data-color="crystal-ball--black"]{
			--_font-color: #ffffffcc;
			--_crystal-glow-color-00: rgba(0, 0, 0, 0);
			--_crystal-glow-color-25: rgba(0, 0, 0, 0.25);
			--_crystal-glow-color-60: rgba(0, 0, 0, 0.6);
			--_crystal-glow-color-90: rgba(0, 0, 0, 0.9);
			--_crystal-glow-color-100: rgba(0, 0, 0, 1);
		}
	}

	.name-display {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 24px;
		text-align: center;
		text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
		z-index: 10;
		opacity: 0;
		animation: nameAppear 2s ease-in-out forwards;
		width: 90%;

		.subtext {
			display: block;
			font-size: 1rem;
			opacity: 0.8;
		}
	}


	.smoke {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.smoke::before,
	.smoke::after,
	.smoke-particle {
		content: '';
		position: absolute;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(200, 200, 255, 0.2) 30%, transparent 70%);
		border-radius: 50%;
		filter: blur(3px);
	}

	.smoke::before {
		width: 80px;
		height: 80px;
		top: 20%;
		left: 10%;
		animation: smokeFloat1 6s infinite ease-in-out;
	}

	.smoke::after {
		width: 60px;
		height: 60px;
		top: 60%;
		right: 15%;
		animation: smokeFloat2 8s infinite ease-in-out;
	}

	.smoke-particle {
		width: 40px;
		height: 40px;
	}

	.smoke-particle:nth-child(1) {
		top: 30%;
		left: 70%;
		animation: smokeFloat3 7s infinite ease-in-out;
	}

	.smoke-particle:nth-child(2) {
		top: 10%;
		left: 50%;
		animation: smokeFloat4 5s infinite ease-in-out;
		width: 50px;
		height: 50px;
	}

	.smoke-particle:nth-child(3) {
		bottom: 20%;
		left: 20%;
		animation: smokeFloat5 9s infinite ease-in-out;
		width: 35px;
		height: 35px;
	}

	.smoke-particle:nth-child(4) {
		top: 70%;
		left: 60%;
		animation: smokeFloat6 6s infinite ease-in-out;
		width: 45px;
		height: 45px;
	}

	.crystal-shine {
		position: absolute;
		top: 15%;
		left: 25%;
		width: 60px;
		height: 60px;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
		border-radius: 50%;
		filter: blur(10px);
		animation: shine 4s infinite ease-in-out;
	}
}

@keyframes rotateColor {
	0% {
		filter: hue-rotate(0deg);
	}

	50% {
		filter: hue-rotate(15deg);
	}

	100% {
		filter: hue-rotate(0deg);
	}
}

@keyframes pulseAura {
	0%, 100% {
		box-shadow:
			inset 0 20px var(--_depth_outline) var(--_shine-color-background),
			inset 20px 0 var(--_depth_edges) var(--_shine-color-left),
			inset -20px 0 var(--_depth_edges) var(--_shine-color-right),
			0 0 20px var(--_crystal-glow-color-25),
			0 0 40px var(--_crystal-glow-color-60),
			0 0 60px var(--_crystal-glow-color-60),
			0 0 80px var(--_crystal-glow-color-90),
			-10px 0 var(--_depth_edges) var(--_shine-color-left),
			10px 0 var(--_depth_edges) var(--_shine-color-right);
	}

	50% {
		box-shadow:
			inset 0 20px var(--_depth_outline) var(--_shine-color-background),
			inset 20px 0 var(--_depth_edges) var(--_shine-color-left),
			inset -20px 0 var(--_depth_edges) var(--_shine-color-right),
			0 0 30px var(--_crystal-glow-color-25),
			0 0 60px var(--_crystal-glow-color-60),
			0 0 90px var(--_crystal-glow-color-60),
			0 0 120px var(--_crystal-glow-color-90),
			-10px 0 var(--_depth_edges) var(--_shine-color-left),
			10px 0 var(--_depth_edges) var(--_shine-color-right);
	}
}

@keyframes shine {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.2);
	}
}

@keyframes smokeFloat1 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.6;
	}

	25% {
		transform: translate(30px, -20px) rotate(90deg) scale(1.2);
		opacity: 0.8;
	}

	50% {
		transform: translate(-20px, -40px) rotate(180deg) scale(0.8);
		opacity: 0.4;
	}

	75% {
		transform: translate(-40px, 10px) rotate(270deg) scale(1.1);
		opacity: 0.7;
	}
}

@keyframes smokeFloat2 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.5;
	}

	33% {
		transform: translate(-25px, 30px) rotate(120deg) scale(1.3);
		opacity: 0.7;
	}

	66% {
		transform: translate(35px, -15px) rotate(240deg) scale(0.9);
		opacity: 0.3;
	}
}

@keyframes smokeFloat3 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.4;
	}

	50% {
		transform: translate(-30px, 25px) rotate(180deg) scale(1.4);
		opacity: 0.8;
	}
}

@keyframes smokeFloat4 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.6;
	}

	40% {
		transform: translate(20px, 35px) rotate(144deg) scale(0.7);
		opacity: 0.3;
	}

	80% {
		transform: translate(-15px, -25px) rotate(288deg) scale(1.2);
		opacity: 0.9;
	}
}

@keyframes smokeFloat5 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.5;
	}

	30% {
		transform: translate(40px, -30px) rotate(108deg) scale(1.1);
		opacity: 0.7;
	}

	60% {
		transform: translate(-20px, 20px) rotate(216deg) scale(0.8);
		opacity: 0.4;
	}

	90% {
		transform: translate(10px, -10px) rotate(324deg) scale(1.3);
		opacity: 0.6;
	}
}

@keyframes smokeFloat6 {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.4;
	}

	25% {
		transform: translate(-35px, -20px) rotate(90deg) scale(0.9);
		opacity: 0.8;
	}

	75% {
		transform: translate(25px, 30px) rotate(270deg) scale(1.2);
		opacity: 0.5;
	}
}

@keyframes nameAppear {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}

	50% {
		opacity: 0.7;
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.banner {
	display: flex;
	justify-content: center;
	min-width: 300px;

	&[data-color="banner--ribbon"] {
		background: linear-gradient(45deg, #8B4513, #A0522D);
		color: white;
		padding: 12px 30px;
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 2px;
		position: relative;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
		z-index: 1;
	}

	&[data-color="banner--ribbon"]::before,
	&[data-color="banner--ribbon"]::after {
		content: '';
		position: absolute;
		top: 0;
		width: 0;
		height: 0;
		border-style: solid;
	}

	&[data-color="banner--ribbon"]::before {
		left: -15px;
		border-width: 24px 15px 24px 0;
		border-color: transparent #8B4513 transparent transparent;
	}

	&[data-color="banner--ribbon"]::after {
		right: -15px;
		border-width: 24px 0 24px 15px;
		border-color: transparent transparent transparent #8B4513;
	}

	/* Style 2: Decorative Plaque */
	&[data-color="banner--plaque"] {
		background: linear-gradient(45deg, #DAA520, #FFD700);
		color: #8B4513;
		padding: 15px 25px;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		border: 3px solid #B8860B;
		border-radius: 8px;
		box-shadow:
			0 4px 15px rgba(0, 0, 0, 0.3),
			inset 0 2px 5px rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 1;
	}

	&[data-color="banner--plaque"]::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #DAA520;
	}

	/* Style 3: Stone Pedestal */
	&[data-color="banner--pedestal"]{
		background: linear-gradient(45deg, #696969, #A9A9A9);
		color: white;
		padding: 15px 30px;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		border-radius: 0 0 15px 15px;
		box-shadow:
			0 4px 20px rgba(0, 0, 0, 0.4),
			inset 0 2px 5px rgba(255, 255, 255, 0.2);
		position: relative;
		z-index: 1;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	}

	&[data-color="banner--pedestal"]::before {
		content: '';
		position: absolute;
		top: -5px;
		left: 10px;
		right: 10px;
		height: 5px;
		background: linear-gradient(45deg, #808080, #C0C0C0);
		border-radius: 3px;
	}

	/* Style 4: Magical Scroll */
	&[data-color="banner--scroll"] {
		background: linear-gradient(45deg, #F5DEB3, #DEB887);
		color: #8B4513;
		padding: 12px 25px;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		border-radius: 20px;
		box-shadow:
			0 4px 15px rgba(0, 0, 0, 0.3),
			inset 0 2px 5px rgba(255, 255, 255, 0.4);
		position: relative;
		z-index: 1;
		border: 2px solid #CD853F;
	}

	&[data-color="banner--scroll"]::before,
	&[data-color="banner--scroll"]::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 12px;
		height: 12px;
		background: #CD853F;
		border-radius: 50%;
	}

	&[data-color="banner--scroll"]::before {
		left: -6px;
	}

	&[data-color="banner--scroll"]::after {
		right: -6px;
	}

	&[data-color="banner--parchment"] {
		position: relative;
		background: linear-gradient(to bottom, #f4e4c1, #e8d4a0, #f4e4c1);
		padding: var(--spacing-double);
		border: var(--size-border) solid var(--color-primary);
		border-radius: 15px;
		box-shadow: 
			0 10px 30px rgba(0,0,0,0.5),
			inset 0 0 30px rgba(139,115,85,0.2);
		/*  ==== */
		margin: 0;
		font-size: 2em;
		text-align: center;
		color: var(--color-primary);
		font-weight: bold;
		text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
		/*  ==== */
	    &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(to right, #c4a460, #a67c40);
            border: var(--size-border) solid var(--color-primary);
        }

        &::before {
            left: -20px;
            border-radius: 20px 0 0 20px;
            box-shadow: inset -5px 0 10px rgba(0,0,0,0.3);
        }

        &::after {
            right: -20px;
            border-radius: 0 20px 20px 0;
            box-shadow: inset 5px 0 10px rgba(0,0,0,0.3);
        }
	}
}

.tabs {
	.tab-buttons {
		display: flex;
		gap: var(--spacing);
		overflow: hidden;
		padding-bottom: 10px;
		padding-left: 20px;

		.tab-button {
			flex: 0 0 min-content;
			padding: var(--spacing);
			border: none;
			border-radius:  0 0 var(--spacing) var(--spacing);
			background-color: var(--color-primary);
			color: var(--color-foreground);
			cursor: pointer;
			font-size: 1rem;
			transition: background-color 0.3s, color 0.3s;

			&:hover {
				background-color: var(--color-background);
				color: var(--color-foreground);
			}

			&.active {
				background-color: var(--color-background-offset);
				color: var(--color-primary);
				box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
			}
		}
	}

	.tab {
		background-color: var(--color-background-offset);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-double);
		padding: var(--spacing);
		border-radius: var(--spacing-double);
		box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
		min-height: 100px;

		&.tab--hidden {
			display: none;
		}
		&.tab--settings{
			.parameters {
				grid-template-columns: 1fr;
				grid-auto-rows: min-content;
			}
		}
		.parameters, legend {
			background-color: var(--color-background-offset);
			padding: var(--spacing);
			/* border-radius: var(--spacing); */
			/* border: var(--size-border) solid var(--color-primary); */
			margin: 0;
			/* width: 100%; */
			box-sizing: border-box;
		}
	}
}
.tab--history {
	#nameHistory {
		display: flex;
		flex-direction: column;
		gap: var(--spacing);
		padding: 0;

		flex: 1;
		justify-items: center;
		justify-content: center;

		.empty-name {
			list-style: none;
			align-self: center;
			justify-self: center;
			height: 100%;
		}

		.generated-name {
			display: grid;
			grid-template-columns: auto min-content;
			grid-template-rows: auto;
			align-items: center;
			justify-content: space-between;
			box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
			padding: var(--spacing);
			border-radius: var(--spacing);
			background-color: var(--hq-card-background);
			gap: var(--spacing);


			.generated-name__title {
				grid-row: 1;
				grid-column: 1;
			}

			.generated-name__meta {
				grid-row: 2;
				grid-column: span 2;
				display: flex;
				flex-direction: row;
				gap: var(--spacing);
				flex-wrap: wrap;
			}

			.generated-name__actions {
				display: flex;
				grid-row: 1;
				grid-column: 2;
				align-items: baseline;
				justify-content: end;
				min-height: 100%;
				gap: 0.125rem;

				&>* {
					box-sizing: content-box;
					height: var(--size-min);
				}
			}
		}
	}
}