@use "./mixins/partials" as *;
@use "./mixins/foundry" as *;
@use "./vars.scss" as *;

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');

.dotdungeon {
	--scrollbar-handle-color: #782e22;
	--scrollbar-handle-border-color: var(--color-border-highlight);


	::-webkit-scrollbar {
		width: var(--scrollbar-width, 5px);
	}
	::-webkit-scrollbar-thumb {
		background: var(--scrollbar-handle-color);
		border-color: var(--scrollbar-handle-border-color);
		border-radius: 5px;
	}
}

// Reset the parts of Foundry's styling which gets in the way of what I want
.dotdungeon > .window-content {

	h2, h3, h4, h5, h6 {
		@include fvtt_reset;
		color: inherit;
		font-family: $title-font;
		margin: 0;
	}

	label {
		cursor: pointer;
	}

	button, button:hover {
		@include fvtt_reset;
		font-family: inherit;
		cursor: pointer;

		&:disabled {
			cursor: default;
		}
	}

	input[type="text"],
	input[type="number"],
	textarea {
		@include fvtt_reset;
		padding: 5px 7px;
	}

	textarea {
		resize: vertical;
	}

	select, select:hover {
		cursor: pointer;

		:disabled {
			cursor: default;
		}
	}

	hr {
		border-color: black;
		opacity: 25%;
		width: 100%;
	}
}

// Styling that doesn't belong to any particular part of my sheet
.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
	container-type: size;

	> .window-content {
		padding: 0;
		background: $background;

		.debug-data {
			opacity: 60%;
			font-family: $body-font;
			word-break: break-all;
		}
	}
}