/* Dice Tray */

.dice-tray {
	--dt-accent: var(--interactive-accent);
	--dt-bg: var(--background-secondary);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.05em 0.55em 0.05em 0.4em;
	border-radius: 999px;
	background: var(--dt-bg);
	box-shadow: inset 0 0 0 1px var(--background-modifier-border);
	font-family: var(--font-monospace);
	font-size: 0.92em;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
	vertical-align: baseline;
	transition: box-shadow 120ms ease, transform 120ms ease;
}
.dice-tray:hover {
	box-shadow: inset 0 0 0 1px var(--dt-accent);
}
.dice-tray:active {
	transform: scale(0.96);
}
.dice-tray-icon {
	display: inline-flex;
	color: var(--dt-accent);
}
.dice-tray-icon svg {
	width: 1em;
	height: 1em;
}
.dice-tray-total {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 1ch;
	text-align: center;
}
.dice-tray-formula {
	color: var(--text-muted);
	font-size: 0.85em;
}
.dice-tray-formula::before {
	content: '·';
	margin-right: 0.3em;
}

/* roll animation */
.dice-tray-rolling .dice-tray-icon {
	animation: dice-tray-spin 270ms ease-in-out;
}
.dice-tray-rolling .dice-tray-total {
	color: var(--text-muted);
}
@keyframes dice-tray-spin {
	from { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.25); }
	to { transform: rotate(360deg) scale(1); }
}

/* natural 20 / natural 1 on a lone d20 */
.dice-tray-crit {
	--dt-accent: var(--color-green);
	box-shadow: inset 0 0 0 1px var(--color-green), 0 0 10px color-mix(in srgb, var(--color-green) 55%, transparent);
}
.dice-tray-crit .dice-tray-total { color: var(--color-green); }
.dice-tray-fumble {
	--dt-accent: var(--color-red);
	box-shadow: inset 0 0 0 1px var(--color-red);
}
.dice-tray-fumble .dice-tray-total { color: var(--color-red); }

.dice-tray-avg {
	border-style: dashed;
	opacity: 0.85;
}
.dice-tray-error {
	background: var(--background-modifier-error);
	color: var(--text-error);
	font-family: var(--font-interface);
	cursor: default;
}

/* hover card with the individual dice */
.dice-tray-card {
	display: none;
	position: absolute;
	left: var(--dice-tray-shift, 0);
	top: calc(100% + 6px);
	z-index: 50;
	min-width: 12em;
	max-width: min(28em, calc(100vw - 16px));
	padding: 0.5em 0.65em;
	border-radius: var(--radius-m, 8px);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	box-shadow: var(--shadow-s, 0 4px 16px rgba(0, 0, 0, 0.25));
	font-size: 0.85em;
	font-weight: 400;
	white-space: nowrap;
	cursor: default;
}
.dice-tray:hover .dice-tray-card,
.dice-tray:focus-within .dice-tray-card,
.dice-tray-peek .dice-tray-card {
	display: block;
}
.dice-tray-narrative .dice-tray-card {
	white-space: normal;
}
.dice-tray-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.15em 0;
}
.dice-tray-row-label {
	color: var(--text-muted);
	min-width: 4em;
}
.dice-tray-tiles {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25em;
}
.dice-tray-die {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7em;
	height: 1.7em;
	padding: 0 0.3em;
	border-radius: 0.35em;
	background: var(--dt-bg);
	box-shadow: inset 0 0 0 1px var(--background-modifier-border);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.dice-tray-die-dropped {
	opacity: 0.4;
	text-decoration: line-through;
}
.dice-tray-die-exploded {
	box-shadow: inset 0 0 0 1px var(--dt-accent);
	color: var(--dt-accent);
}
.dice-tray-row-total {
	margin-left: auto;
	color: var(--text-muted);
}
.dice-tray-card-total {
	margin-top: 0.3em;
	padding-top: 0.3em;
	border-top: 1px solid var(--background-modifier-border);
	color: var(--text-normal);
	font-weight: 600;
}

/* roll modal */
.dice-tray-modal .dice-tray-input {
	width: 100%;
	font-family: var(--font-monospace);
	font-size: 1.1em;
}
.dice-tray-modal-out {
	margin: 1em 0;
	text-align: center;
}
.dice-tray-modal-total {
	font-size: 3em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--interactive-accent);
	line-height: 1.1;
}
.dice-tray-modal-detail {
	color: var(--text-muted);
	font-family: var(--font-monospace);
	font-size: 0.9em;
	margin-top: 0.3em;
}
.dice-tray-recent {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}
.dice-tray-recent button {
	font-family: var(--font-monospace);
	font-size: 0.85em;
}

/* note rolls: results are rendered markdown, so loosen the chip */
.dice-tray-note {
	border-radius: var(--radius-m, 8px);
	font-family: inherit;
	padding: 0.1em 0.6em 0.1em 0.45em;
	white-space: normal;
	align-items: flex-start;
}
.dice-tray-note .dice-tray-icon {
	margin-top: 0.35em;
}
.dice-tray-note-out {
	display: inline-flex;
	flex-direction: column;
	gap: 0.15em;
}
.dice-tray-note-item p {
	margin: 0;
}
.dice-tray-note-item + .dice-tray-note-item {
	border-top: 1px dashed var(--background-modifier-border);
	padding-top: 0.15em;
}
.dice-tray-die-stunt {
	background: var(--dt-accent);
	color: var(--text-on-accent);
}

/* the dice panel in the sidebar */
.dice-tray-panel {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}
.dice-tray-panel-dice {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4em;
}
.dice-tray-panel-die {
	font-family: var(--font-monospace);
	font-variant-numeric: tabular-nums;
}
.dice-tray-panel button.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}
.dice-tray-panel-row {
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.dice-tray-panel-mod {
	min-width: 2.5em;
	text-align: center;
	font-family: var(--font-monospace);
	font-variant-numeric: tabular-nums;
}
.dice-tray-panel-edge:first-of-type {
	margin-left: auto;
}
.dice-tray-panel .dice-tray-input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-monospace);
}
.dice-tray-panel-out:empty {
	display: none;
}
.dice-tray-panel h6 {
	margin: 0.6em 0 0;
	color: var(--text-muted);
}
.dice-tray-panel-saved {
	display: inline-flex;
}
.dice-tray-panel-saved .dice-tray-panel-forget {
	padding: 0 0.5em;
	color: var(--text-muted);
}
.dice-tray-panel-empty {
	color: var(--text-faint);
	font-size: 0.85em;
}
.dice-tray-panel-rolls {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dice-tray-panel-rolls li {
	display: flex;
	gap: 0.6em;
	align-items: baseline;
	padding: 0.3em 0.2em;
	border-bottom: 1px solid var(--background-modifier-border);
	cursor: pointer;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}
.dice-tray-panel-rolls li:hover {
	background: var(--background-modifier-hover);
}
.dice-tray-panel-total {
	min-width: 2.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--interactive-accent);
}

/* the dice thrown across the window: a sheet that clicks pass through */
.dice-tray-throw {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: var(--layer-tooltip);
}