/*!
    Project: Webswing server webapp style.css (v 1.01)
    Author: Stephen Niemans
*/

// Description:
// 1. Imports all SASS Partials
// 2. Compiles into style.css stylesheet in Webswing's "webapp/javascript/templates" folder

@charset 'UTF-8';

@import '_base/_config';  // Variables for typography, colors, etc
@import '_fonts/_fonts';      // Declares font families
@import '_fonts/_icons';      // Declares icon fonts

.webswing-element {
	@extend %ws-root;

	@import '_utilities/_normalize';  // Normalize.css, makes default styles more predictable
	@import '_utilities/_mixins';     // SASS mixins, mostly for convenience
	@import '_utilities/_utility';    // Custom utility classes for Webswing
	
	// _base: Document-wide base styles
	@import '_base/_base';   // Sets all HTML element styles after the reset
	
	// _components: Various components that make up the application
	@import '_components/_basic';                   // Form fields etc
	@import '_components/_forms';                   // Form fields etc
	@import '_components/_modals/_login';           // Login modal
	@import '_components/_toolbars/_touch';     	// Touch interface integration
	
	.webswing-element-content {
		@extend %ws-root-content;
		
		// _base: Document-wide base styles
		@import '_base/_base';   // Sets all HTML element styles after the reset
		
		// _utilities: Mixins, variables, and third party code
		@import '_utilities/_mixins';     // SASS mixins, mostly for convenience
		@import '_utilities/_utility';    // Custom utility classes for Webswing
		
		@import '_components/_basic';                   // Form fields etc
		@import '_components/_forms';                   // Form fields etc
		@import '_components/_progress-bar';            // A progress bar for file import and export
		@import '_components/_spinner';                 // CSS loading animation
		@import '_components/_modals/_dialog';          // Common dialogs
		@import '_components/_modals/_files';           // File up/download dialog
		@import '_components/_modals/_paste';   		// Clipboard paste request dialog
		@import '_components/_modals/_selector';   		// Webswing app selection
		@import '_components/_toolbars/_clipboard';     // Clipboard integration toolbar
		@import '_components/_toolbars/_files';     	// File dialog integration toolbar
		@import '_components/_toolbars/_playback';     	// Session recording playback toolbar
		@import '_components/_toolbars/_network';     	// Network monitor notifications
		@import '_components/_toolbars/_message';     	// Message dialog toolbar
		@import '_components/_modals/_windowSwitcher';	// Window swticher dialog

		@import '_utilities/responsiveUtil'; // responsive classes

		canvas {
			z-index: 100;
		}
		
		.webswing-disabled {
			pointer-events: none;
		}
		
		.webswing-html-canvas.modal-blocked {
			pointer-events: none;
		}

		.webswing-iframe-muted-while-dragging{
			pointer-events: none;
		}
		
		.close-prevented {
			z-index: -1000 !important;
			top: 0 !important;
			left: 0 !important;
			height: 1px !important;
			width: 1px !important;
			opacity: 0 !important;
		}
		
		.internal-frames-wrapper {
			position: absolute;
			pointer-events: none;
			overflow: hidden;
			
			canvas {
				pointer-events: all;
			}
			
			.webswing-html-canvas {
				pointer-events: all;
			}
		}
		
		.aria-element {
			position: absolute;
			z-index: 9999;
			opacity: 0;
			background: transparent;
			pointer-events: none;
			overflow: hidden;
        }
        
        #aria-describedby {
        	display: none;
        }
        
        #aria-live-log {
        	position: absolute;
			opacity: 0;
			pointer-events: none;
			overflow: hidden;
			width: 0;
			height: 0;
        }
		
	}
	
	&.touch {
		display: flex;
		flex-direction: column;
		overflow: auto;
		touch-action: manipulation;
		
		* {
			touch-action: manipulation;
		}
		
		.webswing-element-content {
			flex-grow: 1;
			touch-action: manipulation;
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			-o-user-select: none; 
			user-select: none;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
    		-webkit-touch-callout: none;
			position: relative;
			
			canvas {
				touch-action: manipulation;
				-webkit-user-select: none; 
				-khtml-user-select: none; 
				-moz-user-select: none; 
				-ms-user-select: none; 
				-o-user-select: none; 
				user-select: none;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
    			-webkit-touch-callout: none;
    			position: absolute;
    			top: 0;
    			left: 0;
				
				&:focus {
					outline: none;
				}
			}
			
			.ws-input-hidden {
				-webkit-user-select: text; 
				-khtml-user-select: text; 
				-moz-user-select: text; 
				-ms-user-select: text; 
				-o-user-select: text; 
				user-select: text;
			}
			
			.ws-clipboard, .ws-networkbar, .ws-commonbar {
				position: fixed;
				bottom: 65px;
				box-shadow: none;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}
		}
	}

}

.visibility-overlay, .modality-overlay {
	display: none;
	position: fixed;
	z-index: 1015;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	text-align: center;
}

.visibility-overlay.active, .modality-overlay.active {
	display: block;
}

.modality-overlay.suppressed {
	display: none !important;
}

.visibility-overlay .visibility-message,
.modality-overlay .modality-message {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	color: $white;
}

.modality-overlay .modality-button {
	font-size: 1rem;
	margin-top: 10px;
}