@font-face {
	font-family: Chimken;
	src: url("https://avali-scratchpad.owouw.us/scratchpad/font.ttf");
}

html,
body {
	overscroll-behavior: none;

	&.avali-scratchbox-shown {
		overflow: hidden !important;
	}
}

.avali-scratchbox {
	--scratchpad-ui-font: Chimken, Roundfeather, Avali Scratch, sans-serif;
	--theme-color: orange;

	border: 2px solid var(--theme-color);
	background-color: #222;
	corner-shape: bevel;
	border-radius: 16px 0px 16px 0px;
	width: calc(300px + 8px);
	color: var(--theme-color);
	font-family: var(--scratchpad-ui-font);
	filter: drop-shadow(0 0 20px var(--theme-color));

	position: fixed;
	bottom: -120%;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.2s;

	&.show {
		bottom: 8px;
	}

	padding: 8px;

	overscroll-behavior: none;

	.canvas-container {
		border: 2px solid var(--theme-color);
		border-radius: 16px 0px 16px 0px;
		background-color: #000;
		corner-shape: bevel;
		position: relative;
		background-image: url("/scratchpad/background.png");
		background-size: cover;

		height: 300px;
		width: 300px;

		button {
			position: absolute;
			border: none;
			background: none;
			/*background-color: #00ff0044;*/
			outline: none !important;

			width: 56px;
			height: 56px;
			border-radius: 100%;
			color: #00000000;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			/*font-size: 0;*/

			/*&.hover {
                background-color: var(--theme-color);
            }

            &.click {
                background-color: white;
            }*/
		}
	}

	font-size: 0;

	&>button {
		border: 2px solid var(--theme-color);
		background-color: #000;
		outline: none !important;
		margin-top: 4px;

		width: 48px;
		height: 48px;
		border-radius: 100%;
		color: var(--theme-color);

		font-size: 24px;
		font-family: var(--scratchpad-ui-font);

		transition: .2s;
		box-sizing: border-box;

		margin-left: 4px;
		margin-right: 4px;

		/*font-size: 0;*/

		&.hide {
			transition: .2s;
			width: 0;
			height: 0;
			font-size: 0;
			margin: 0;
			padding: 0;
			border: 2px solid #222;
			margin-left: 0px;
			margin-right: -4px;

			background-color: #222;
		}

		&:hover {
			background-color: var(--theme-color);
			color: black;
		}

		&:active {
			background-color: white;
			color: black;
		}
	}
}