/* DANGER AREA */
/* TODO: Find a better way to override styles like this */

/* Custom dice roll chat messages */
.chat-message:has(.litm.dice-roll) {
	background-color: var(--litm-color-weakness);
	background-blend-mode: color-burn;
	color: var(--litm-color-primary-bg);
	font-family: var(--litm-font-text);
	font-size: var(--font-size-12);

	&.whisper {
		background-color: var(--color-border-dark-primary);
	}

	&.blind {
		border-color: var(--color-level-warning);
	}

	&.self {
		border-color: var(--color-level-error);
	}

	& .message-header {
		color: color-mix(in hsl, var(--litm-color-accent) 70%, transparent);
	}
}

/* Custom content links */
a.content-link {
	border: none;
	border-radius: 0px;
	background: none;
	padding-inline: 4px;
	outline: 1px dashed;
	outline-offset: -1px;

	& i {
		margin-inline-end: 3px;
	}
}

#logo {
	object-fit: contain;
	object-position: top;
	filter: drop-shadow(
		0px 0px 3px color-mix(in hsl, var(--litm-color-bg) 60%, transparent)
	);
	margin-inline: 16px;
	image-rendering: -webkit-optimize-contrast;
}

/* Fix the pause button */
#pause.paused {
	animation: none;
	gap: 0px;

	img {
		will-change: filter;
		animation: pulse 3s infinite ease-in-out;
		opacity: 80%;
		object-fit: contain;
		width: 180px;
		height: 180px;
		left: calc(50% - 90px);
		rotate: 39deg;
		margin-block: -35px -10px;
	}

	figcaption {
		will-change: filter;
		animation: pulse 3s infinite ease-in-out;
		color: var(--litm-color-accent);
		text-shadow: 2px 2px 2px var(--litm-color);
		font-family: var(--litm-font-heading);
		font-weight: 800;
		letter-spacing: 2.5px;
		padding: 0;
		margin: 0;
	}
}

@media (prefers-reduced-motion) {
	#pause {
		animation: none;
	}
}

/* Reduce size of tooltips */
#tooltip,
aside[role="tooltip"] {
	font-size: var(--font-size-14);

	& a.content-link {
		color: var(--litm-color-accent);

		& i {
			color: var(--litm-color-accent);
		}
	}
}

/* Draggable should have grap-cursor */
[draggable="true"] {
	cursor: grab;
}

/* Animations */
@keyframes pulse {
	0% {
		filter: drop-shadow(0 0 0 transparent);
	}

	50% {
		filter: drop-shadow(0 0 4px var(--litm-color-alt-bg));
	}

	100% {
		filter: drop-shadow(0 0 0 transparent);
	}
}
