@charset "UTF-8";

div#title {
	position: relative;
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;

	>h1 {
		margin: unset;
		font-family: "Cascadia Code";
		font-size: 2.2rem;

		&+small {
			order: -1;
			margin-bottom: -0.3rem;
			font-family: "Geologica";
			font-size: 0.9rem;
			text-align: center;
			color: var(--red, red);
		}
	}
}

div#pechatalka {
	--width: 300px;
	width: var(--width, 300px);
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;

	>div.system {
		display: none;
	}

	>nav.tools {
		--menu-padding-x: 0.4rem;
		margin-bottom: 0.5rem;
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		overflow: clip;
		border: 2px solid var(--section-background-color-inverted);

		>:is(button, .button) {
			--padding-x: 0.8rem;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			border: unset !important;
			background-color: unset;

			&:first-of-type:first-child {
				padding-left: calc(var(--padding-x, 0.6rem) + var(--menu-padding-x, 0.4rem)) !important;
			}

			&:last-of-type:last-child:not(:only-of-type) {
				padding-right: calc(var(--padding-x, 0.6rem) + var(--menu-padding-x, 0.4rem)) !important;
			}

			&:is([for="pechatalka_add_image"])+ :is(button, .button) {
				margin-left: auto;
			}

			>div.color {
				--size: 14px;
				width: var(--size, 14px);
				height: var(--size, 14px);
				border-radius: 3px;
				background-color: var(--color, var(--paper, var(--white, #fff)));

				/* &:after {
            content: "";
            width: 100%;
            height: 100%;
            background-color: 2px solid var(--button-background-color-inverted);
          } */
			}
		}
	}

	>div.canvas.pin {
		--diameter-cut: 250px;
		--offset: calc(37 / 48 * 100);
		--diameter-display: calc(var(--diameter-cut) * var(--offset) / 100);
		position: relative;
		width: var(--diameter-cut, 300px);
		height: var(--diameter-cut, 300px);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: clip;
		border-radius: 100%;
		border: 2px solid var(--background-color-inverted);
		background-color: var(--paper, var(--white, #fff));

		&:before {
			z-index: 500;
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			pointer-events: none;
			opacity: 0;
			background: radial-gradient(1px,
					transparent calc(var(--diameter-display, 77.08%) / 2),
					#000a);
			transition: opacity 0.1s ease-out;
		}

		&:has(div.layer) {
			&:before {
				opacity: 1;
				transition: opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1);
			}

			>.button.add {
				display: none;
			}
		}

		>.button.add {
			z-index: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			border-radius: 100%;
		}

		>div.display {
			z-index: 1000;
			width: var(--diameter-display, 77.08%);
			height: var(--diameter-display, 77.08%);
			pointer-events: none;
			border-radius: 100%;
			border: 2px dashed var(--background-color-inverted);
		}

		>div.layer {
			z-index: 100;
			position: absolute;
			/* min-width: 50%;
			max-width: 200%; */
			width: calc(var(--diameter-cut, var(--width, 100%)) + var(--width-zoom, 0px));
			height: calc(var(--diameter-cut, var(--width, 100%)) + var(--width-zoom, 0px));
			cursor: grab;
			display: flex;
			place-items: center;

			&:active {
				cursor: grabbing;
			}

			>img {
				width: 100%;
				animation-name: added-image;
				animation-duration: 0.4s;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
			}

			>button {
				&:is(:disabled, [disabled="true"], .disabled) {
					display: none !important;
					pointer-events: none !important;
				}

				&:is(.delete) {
					--offset: 5px;
					--size: 40px;
					z-index: 1500;
					position: fixed;
					margin-top: var(--offset);
					margin-left: calc((var(--size, 40px) + var(--offset)) * -1);
					width: var(--size, 40px);
					height: var(--size, 40px);
					display: inline-flex;
					justify-content: center;
					align-items: center;
					mix-blend-mode: overlay;

					&:hover {
						mix-blend-mode: normal;
					}
				}
			}
		}
	}

	&:has(> div.canvas.pin > div.layer) {
		>div.result {
			>button.buy {
				cursor: pointer !important;
				filter: unset;
			}
		}
	}

	>div.result {
		/* margin-top: auto; */
		margin-bottom: 1rem;
		width: 100%;
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		gap: 1rem;

		>button.print {
			border: unset !important;
		}

		>span.cost {
			margin-left: auto;
			display: inline;
			align-content: center;

			/* &:before {
          content: var(--localization-cost, "Cost") ":";
          margin-right: 0.4rem;
        } */

			&:after {
				content: var(--currency, "?");
				margin-left: 0.1rem;
			}
		}

		>button.buy {
			cursor: not-allowed !important;
			filter: grayscale(1) brightness(0.6);

			&:before {
				content: var(--localization-buy, "Buy");
			}
		}
	}
}
