/* ==UserStyle==
@name           picrew landscape layout
@namespace      github.com/adrianmgg/picrew_landscape_layout
@version        1.5.3
@description    rearranges & adjusts picrew image maker to fit better on a landscape window
@author         amgg
@preprocessor   less
@var checkbox pixelatedCanvas "Pixelated Canvas Rendering" 0
@var checkbox spaceForAd "Leave space for ads" 0
@var range controlsMinWidth "Controls Panel Minimum Width (as % of screen width) (resize window after adjusting)" [30, 5, 95, 1, "vw"]
@var checkbox hideKeepButton "Hide 'Keep' Button" 0
==/UserStyle== */
@-moz-document regexp("^(https?://)?(www\\.)?picrew\\.me/(\\w{2}/)?image_maker/\\d+/?$") {
	/* if it's a portrait window just let picrew handle it */
	@media (min-aspect-ratio: 10/10){
		:root {
			& when (@spaceForAd = 1) {
				--__height: calc(100vh - 106px);
			}
			& when (@spaceForAd = 0) {
				--__height: 100vh;
			}
			--__canvas_desired_width: var(--__height);
			--__controls_min_width: @controlsMinWidth;
			--__controls_width: ~"max(calc(100vw - var(--__canvas_desired_width)), var(--__controls_min_width))";
			--__canvas_width: calc(100vw - var(--__controls_width));
			--__canvas_scale_factor: 8;
		}

		/* canvas wrapper */
		.imagemaker_canvas_wrapper {
			position: fixed !important;
			left: 0px !important;
			max-height: unset !important;
			max-width: unset !important;
			height: calc(var(--__height) / var(--__canvas_scale_factor)) !important;
			width: calc(var(--__canvas_width) / var(--__canvas_scale_factor)) !important;
			transform-origin: top left;
			transform: scale(var(--__canvas_scale_factor));
		}

		.imagemaker_container {
			overflow: visible !important;
		}

		/* canvas buttons */
        .corner-button(@verti, @horiz) {
            /* make sure the other ones are unset */
            each(~(left, right), { @{value}: if(@horiz = @value, 0px, unset) !important; });
            each(~(top, bottom), { @{value}: if(@verti = @value, 0px, unset) !important; });
            @horiz-dir: if(@horiz = right,  -1, 1);
            @verti-dir:  if(@verti = bottom, -1, 1);
            transform: scale(calc(1 / var(--__canvas_scale_factor))) translate((4px * @horiz-dir), (4px * @verti-dir)) !important;
            transform-origin: @horiz @verti !important;
        }
        .imagemaker_canvas_wrapper > {
            .imagemaker_complete_btn {
                .corner-button(bottom, left);
            }
            .imagemaker_ctrl_btns {
                .corner-button(bottom, right);
            }
            .bookmark-icon {
                .corner-button(top, left);
            }
            .imagemaker_save_btn {
                .corner-button(top, right);
                & when (@hideKeepButton = 1) { display: none; }
            }
        }

		/* logo */
		.imagemaker_picrew_logo {
			position: fixed !important;
			top: unset !important;
			left: unset !important;
			bottom: 4px !important;
			right: 4px !important;
		}

		/* controls wrapper */
		.play-Container_Imagemaker {
			position: fixed !important;
			width: var(--__controls_width) !important;
			height: var(--__height) !important;
			right: 0px !important;
			top: 0px !important;
		}

		.imagemaker_parts_menu ul li {
			width: unset !important;
			margin-left: 6px !important;
			margin-right: 6px !important;
		}

		.imagemaker_parts_menu ul li:first-child {
			margin-left: 12px !important;
		}

		.imagemaker_parts_menu ul li:last-child {
			margin-right: 64px !important;
		}
	}

	/* canvas */
	#my-canvas-object canvas {
		& when (@pixelatedCanvas = 1) {
			image-rendering: pixelated;
		}
	}

	/* hide "please turn your phone vertically to play" thing that covers screen */
	.landscape_info {
		display: none;
	}
}