.litm.litm--roll {
	min-width: 330px;
	background: url(../../assets/media/bg-alt.webp);
	background-size: cover;
	background-blend-mode: luminosity;
	background-color: var(--litm-color-alt-bg);

	& .window-header {
		color: var(--litm-color-primary);
	}

	& .window-content form {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overflow: clip;
		font-family: var(--litm-font-text);
	}

	& .title {
		grid-area: title;
		font-family: var(--litm-font-accent);
		font-size: var(--font-size-32);
		color: var(--litm-color);
		background: transparent;
		border: none;
		text-align: center;
		height: unset;
		transition: background-color 0.15s;

		&:focus {
			box-shadow: none;
			background-color: rgb(0, 0, 0, 0.1);
		}
	}

	& .litm--tags-summary-total {
		font-family: var(--litm-font-primary);
		font-size: var(--font-size-20);
		color: var(--litm-color-primary);
		margin: auto auto 0px;
		border: none;
	}

	& .litm--roll-dialog-type {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--litm-space-3);
		margin: var(--litm-space-3) var(--litm-space-4) var(--litm-space-2);

		& .litm--roll-dialog-type-choices {
			display: flex;
			justify-content: center;
			gap: var(--litm-space-2);

			& .checkbox {
				height: unset;
				padding: var(--litm-space-1) var(--litm-space-3);
				border: none;
				border-radius: 0px;
				background-color: transparent;
				color: var(--litm-color);
				font-size: var(--font-size-20);
				font-family: var(--litm-font-accent);
				transition: text-shadow 0.15s;

				&:hover,
				&:focus,
				&:active {
					box-shadow: none;
					text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
				}

				&:has(input:checked) {
					border-bottom: 2px solid var(--litm-color);
					border-image: url("../../assets/media/item-divider.webp") 14 / 3;
				}

				& input {
					position: absolute;
					width: 1px;
					height: 1px;
					padding: 0;
					margin: -1px;
					overflow: hidden;
					clip: rect(0, 0, 0, 0);
					white-space: nowrap;
					border-width: 0;
				}
			}
		}
	}

	& .litm--roll-dialog-modifier {
		display: flex;
		justify-content: center;
		margin: var(--litm-space-3) 0;

		& label {
			display: flex;
			align-items: center;
			gap: var(--litm-space-2);
			font-family: var(--litm-font-primary);
			color: var(--litm-color);
			font-size: var(--font-size-18);
		}

		& input[type="number"] {
			width: 4em;
			text-align: center;
			background: transparent;
			border: none;
			border-bottom: 2px solid var(--litm-color-muted-bg);
			border-image: url("../../assets/media/item-divider.webp") 14 / 3;
			color: var(--litm-color-primary);
			font-family: var(--litm-font-accent);
			font-size: var(--font-size-20);
			padding: var(--litm-space-1);

			&:focus {
				box-shadow: none;
				background-color: rgba(0, 0, 0, 0.1);
				outline: none;
			}

			/* Remove spinner buttons */
			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
			&[type="number"] {
				-moz-appearance: textfield;
				appearance: textfield;
			}
		}
	}

	& .litm--roll-dialog-tags-summary {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: scroll;

		& ul {
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--litm-space-3);
			padding-block: var(--litm-space-2);
			margin-inline: var(--litm-space-4);

			& .litm--roll-dialog-tag {
				display: flex;
				align-items: center;
				gap: var(--litm-space-1);
				padding: 0.1em 0.5em;
				cursor: pointer;

				&:has(litm-super-checkbox[value=""]) {
					opacity: 0.6;
				}

				& litm-super-checkbox {
					font-size: var(--font-size-14);
				}
			}
		}

		& hr {
			border-bottom: none;
			border-top: 5px solid var(--litm-color-muted-bg);
			border-image: url(../../assets/media/item-divider.webp) 12 / 3;
			height: 6px;
			width: 80%;
			margin-inline: auto;
		}
	}

	& button[data-click="add-tag"] {
		margin-inline: auto;
		padding-inline: var(--litm-space-4);
		padding-bottom: var(--litm-space-2);
		width: fit-content;
		border: none;
		border-radius: 0px;
		border-top: 2px solid rgb(0, 0, 0, 0.4);
		border-image: url("../../assets/media/item-divider.webp") 14 / 3;
		border-image-outset: var(--litm-space-1);
		background-color: transparent;
		color: var(--litm-color);
		font-size: var(--font-size-20);
		font-family: var(--litm-font-accent);
		transition: text-shadow 0.15s;

		&:hover,
		&:focus,
		&:active {
			box-shadow: none;
			text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
		}
	}

	& .litm--roll-dialog-buttons {
		position: relative;
		grid-area: buttons;
		margin-block: var(--litm-space-3) var(--litm-space-4);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--litm-space-4);

		.litm--roll-dialog-skip-moderation {
			position: absolute;
			display: flex;
			align-items: center;
			gap: var(--litm-space-2);
			left: var(--litm-space-2);
			bottom: calc(-1 * 1.8rem);
			cursor: pointer;
		}

		& button {
			padding-block: var(--litm-space-1);
			border: none;
			background: none;
			color: var(--litm-color-primary);
			font-family: var(--litm-font-heading);
			font-weight: bold;
			font-size: var(--font-size-24);
			cursor: pointer;
			transition: color 0.2s;

			&:hover {
				box-shadow: none;
				text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
			}

			&[type="submit"] {
				background-image: linear-gradient(
					to right,
					transparent,
					var(--litm-color-muted-bg),
					transparent
				);
			}
		}
	}
}
