.litm.dice-roll {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--litm-space-1);
	padding: var(--litm-space-3);
	background: url(/ui/parchment.jpg) repeat;
	background-color: var(--litm-color-accent-bg);
	background-blend-mode: color-burn;
	border: 1px solid color-mix(in hsl, var(--litm-color-accent) 70%, transparent);
	border-radius: 6px;
	transition: all 0.15s;

	&:hover {
		box-shadow: 0 0 3px var(--litm-color-primary-bg);
	}

	& .content-link {
		color: var(--litm-color-alt-bg);

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

	& .dice-flavor {
		font-family: var(--litm-font-heading);
		font-size: var(--font-size-24);
		color: var(--litm-color-bg);
		text-align: center;
	}

	& .dice-effect {
		& p:has(em) {
			color: var(--litm-color-alt-bg);
			font-family: var(--litm-font-primary);
			font-size: var(--font-size-16);
			text-align: center;
		}
	}

	& .dice-result {
		width: 100%;
		margin: 0px auto;

		& .tooltip-part {
			margin-block: var(--litm-space-1);
		}

		.part-flavor {
			&.burned {
				color: color-mix(
					in hsl,
					var(--litm-color-weakness) 60%,
					var(--litm-color-accent)
				);
			}

			&.positive {
				color: color-mix(in hsl, var(--litm-color-status-bg), lightgreen);
			}

			&.warning {
				color: color-mix(in hsl, var(--litm-color-tag-bg), yellow);
			}

			&.negative {
				color: var(--litm-color-limit-bg);
			}
		}
	}

	& .dice-total {
		background-color: var(--litm-color-alt-bg);
		color: var(--litm-color-primary);
		font-family: var(--litm-font-heading);
		font-size: var(--font-size-20);
		text-align: center;
		padding: var(--litm-space-1);
		text-shadow: 0 0 2px rgb(0, 0, 0, 0.3);

		&:is(h4) {
			display: flex;
			flex-direction: column;
		}

		&.success {
			color: var(--color-level-success);
		}

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

	& .reference {
		padding: 0.1em 0.5em;
	}

	& .litm--dice-roll-subtle {
		color: color-mix(in hsl, var(--litm-color-primary-bg) 80%, transparent);
		font-family: var(--litm-font-primary);
		font-size: var(--font-size-12);
	}

	& .dice-result button {
		margin-block-start: var(--litm-space-2);
		font-family: var(--litm-font-sc);
		text-transform: uppercase;
		font-size: var(--font-size-11);
		font-weight: bold;
		background: transparent;
		border: 2px solid var(--litm-color-alt-bg);
		color: var(--litm-color-alt-bg);
		scale: 0.9;
		width: 100%;

		&.litm--roll-approve-button {
			color: color-mix(
				in hsl,
				var(--litm-color-status-bg) 70%,
				var(--litm-color-accent)
			);
			border-color: color-mix(
				in hsl,
				var(--litm-color-status-bg) 70%,
				var(--litm-color-accent)
			);
		}

		&.litm--roll-reject-button {
			color: color-mix(
				in hsl,
				var(--litm-color-limit-bg) 70%,
				var(--litm-color-accent)
			);
			border-color: color-mix(
				in hsl,
				var(--litm-color-limit-bg) 70%,
				var(--litm-color-accent)
			);
		}

		&.litm--roll-burn-button {
			color: color-mix(
				in hsl,
				var(--litm-color-weakness) 60%,
				var(--litm-color-accent)
			);
			border-color: color-mix(
				in hsl,
				var(--litm-color-weakness) 60%,
				var(--litm-color-accent)
			);
		}

		&:hover {
			text-shadow: 0px 0px 2px var(--litm-color-accent);
		}
	}
}

/* Moderation message */
.chat-message.message {
	& .gmOnly {
		display: none;
	}

	&[data-user="gm"] {
		& .gmOnly {
			display: block;
		}

		& .playerOnly {
			display: none;
		}
	}
}
