@use './variables';
@use './mixins';

//styles for tablets

//unfortunately we can't use position sticky because
//while it works on desktop browsers, mobile devices
//don't let it stick for some reason, so we have to resort to
//horizontal scrollbars for now
// @include mixins.sticky_controls_mq{
// 	.app-container{
// 		//has to be inline-block for position: sticky to work
// 		display: inline-block;
// 	}

// 	.controls{
// 		position: -webkit-sticky;
// 		position: sticky;
// 		left: 0;
// 		//has to be inline-flex for position: sticky to work
// 		display: inline-flex;
// 	}
// 	.image-canvas-supercontainer{
// 		overflow-x: initial;
// 	}
// }


//styles for desktop
@include mixins.pinned_controls_mq{
	//reset tablet styles
	.super-dither-controls-container, .global-controls-panel{
		border-left: variables.$controls_border;
		padding: 8px variables.$global_horizontal_padding;
	}
	.super-dither-controls-container{
		border-bottom: variables.$controls_border;
	}
	.global-controls-panel{
		margin: 0;
		min-height: variables.$global_controls_height;
		
		//for before image has loaded
		//and there are no controls below it
		&.no-image{
			border-bottom: variables.$controls_border;
			border-radius: 3px;
		}
	}
}
