:root {
	--sidebar-width: max(15vw, 250px);
	--cursor-size: -1px; /* gets set by js */
	--cursor-border: 2px;
	--border-color: #505050;
	--num-overflow-layers: 5;
}

html, body {
	margin: 0;
	display: flex;
	flex-direction: row;
	color: white;
	font-family: NotoSans, sans-serif;
	font-variation-settings: "wght" 350;
}

#sidebar {
	z-index: 3;
	width: var(--sidebar-width);
	height: 100vh;
	background-color: #454749;
	cursor: default;
	outline: 1px solid var(--border-color);
}

#layer-select {
	display: flex;
	flex-direction: column-reverse;

	height: 170px;
	overflow-y: auto;

	background-color: #3d3d41;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	padding: 0.25rem 0;
	margin: 0.25rem 0.25rem 0 0.25rem;

	& > :first-child {
		margin-bottom: 0 !important;
	}

	.layer {
		display: grid;
		grid-template-columns:
				[label] 1fr
				[operations] auto
				[gap] 0.5rem
				[color] auto;
		justify-content: space-between;
		align-items: center;

		transition: margin 100ms, border 100ms, background-color 100ms;
		border: 1px solid transparent;
		background-color: #535659;
		color: #b9b9b9;
		margin: 2px 4px;
		padding: 0.35rem;
		border-radius: 0.25rem;

		.label {
			grid-column: label;
			width: fit-content;
			cursor: pointer;
		}

		.layer-operations {
			grid-column: operations;

			display: flex;
			flex-direction: row;
			gap: 0.25rem;

			.operation {
				display: flex;
				align-items: center;
				justify-content: center;

				cursor: pointer;
				background-color: transparent;

				> img {
					filter: invert(85%);
					width: 16px;

					&:hover {
						filter: invert(60%);
					}
				}
			}
		}

		.color-picker {
			grid-column: color;

			cursor: pointer;
			width: 0;
			height: 0;
			padding: calc(0.65rem - 2px);
			border-radius: 0.25rem;
			background-color: transparent; /* gets set in the code */
			border: 1px solid transparent; /* gets set in the code */
		}

		&[data-selected="true"] {
			transition: all 100ms;
			background-color: #696b70;
		}
	}
}

@supports selector(::-webkit-scrollbar) and (not (-webkit-touch-callout: none)) {
	#layer-select:has(> :nth-child(n + 5)) {
		.layer {
			margin-right: 0;
		}
	}

	#layer-select {
		--scroll-top-bottom-margin: 2px;
	}

	#layer-select::-webkit-scrollbar {
		width: 12px;
	}

	#layer-select::-webkit-scrollbar-thumb {
		background-color: rgb(128, 128, 128);
		border-radius: 16px;
		border: 3px solid transparent; /* visual gap around the thumb */
		background-clip: padding-box;
	}

	/* Use the scrollbar buttons as invisible spacers (instead of hiding them) */
	#layer-select::-webkit-scrollbar-button {
		display: block;
		background: transparent;
		border: 0;
		color: transparent;
		pointer-events: none; /* prevent arrow-click scrolling */
	}

	#layer-select::-webkit-scrollbar-button:vertical:decrement,
	#layer-select::-webkit-scrollbar-button:vertical:start {
		height: var(--scroll-top-bottom-margin) !important;
	}

	#layer-select::-webkit-scrollbar-button:vertical:increment,
	#layer-select::-webkit-scrollbar-button:vertical:end {
		height: var(--scroll-top-bottom-margin) !important;
	}
}

.operations-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 4px;

	margin: 0.25rem;
	cursor: pointer;
}

.operation {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	justify-content: center;

	gap: 0.5rem;
	padding: 0.25rem;
	background-color: #535659;
	width: fit-content;
	border-radius: 0.25rem;
	user-select: none;

	max-height: 1.5rem;

	.icon {
		filter: invert(85%);
		height: 65%;
	}

	.text {
		text-align: right;
	}

	&:hover {
		background-color: #5f6165;
	}

	&:active {
		background-color: #676a6e;
	}
}

#brush-size {
	width: calc(100% - 0.25rem);
	margin: 0.5rem 0;
}

#tool-selection {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* allow tracks to shrink */
	gap: 8px;

	padding-inline: 4px;
	width: 100%; /* don't subtract the gap */
	min-width: 0; /* important if this is inside a flex container */
	box-sizing: border-box;

	justify-items: stretch;
	align-items: stretch;

	.tool {
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;

		padding: 0.75rem;
		border-radius: 0.25rem;
		background-color: #535659;
		cursor: pointer;

		.icon {
			height: 85%;
			max-width: 100%;
			object-fit: contain;
			filter: invert(85%);
		}

		&[data-selected="true"] {
			background-color: #636569;
		}
	}
}

#file-operations {
	margin: 8px 4px;
}

#canvas-cursor {
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	aspect-ratio: 1 / 1;
	height: calc(var(--cursor-size));
	border: var(--cursor-border) solid #ffffff7f;

	background-color: #ffffff54;
	border-radius: 100%;
	pointer-events: none;
}

#canvas-container {
	z-index: 1;
	display: block;
	box-sizing: border-box;
	height: 100vh;
	width: calc(100vw - var(--sidebar-width));
	cursor: none;

	background-image: url("./res/background.png");
	background-size: 16px;
	image-rendering: pixelated;
}

#main-canvas {
	display: block;
	box-sizing: border-box;
}

@font-face {
	font-family: "NotoSans";
	src: url("./res/NotoSans.ttf");
}