@import url('variables.css');

/* ============================================================================================== */

.footer {
	/* Positioning */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;

	/* Display & Layout */
	display: flex;
	flex-direction: row;
	gap: var(--padding);

	/* Spacing & Box Model */
	margin: 0 auto;
	padding: var(--padding);
	padding-bottom: 0;
	width: fit-content;

	/* Shape & Borders */
	border: var(--border);
	border-radius: var(--border-radius) var(--border-radius) 0 0;

	/* Color & Background */
	background-color: var(--color-card-bg);

	/* Visual Effects & Interactivity */
	backdrop-filter: var(--glass-blur);
	box-shadow:
		0 -10px 30px rgba(0, 0, 0, 0.5),
		0 0 15px color-mix(in srgb, var(--color-light-orange) 20%, transparent);
}

/* ============================================================================================== */

.footer-button {
	/* Spacing & Box Model */
	width: 70px;

	/* Shape & Borders */
	height: 30px;
	border: var(--border);
	border-radius: var(--border-radius);

	/* Typography */
	font-family: var(--font-handwriting);
	font-size: 15px;

	/* Color & Background */
	background: var(--bg-gradient-blue);
	color: var(--color-text);

	/* Visual Effects & Interactivity */
	cursor: pointer;
	backdrop-filter: var(--glass-blur);
	transition:
		transform 0.15s ease,
		opacity 0.15s ease,
		box-shadow 0.15s ease;
}

/* ============================================================================================== */

.footer-button:hover {
	/* Visual Effects & Interactivity */
	transform: scale(1.05);
	opacity: 0.9;
	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.6),
		0 0 20px color-mix(in srgb, var(--color-light-blue) 40%, transparent);
}

/* ============================================================================================== */

.footer-button:active {
	/* Visual Effects & Interactivity */
	transform: scale(0.95);
	opacity: 1;
	box-shadow:
		0 4px 15px rgba(0, 0, 0, 0.4),
		0 0 8px color-mix(in srgb, var(--color-light-blue) 60%, transparent);
}

/* ============================================================================================== */