/* wc.common.page.scss */
//**********************************************************************************************************************
// This file should not be excluded or overridden. It sets up some necessary common structural styles and anything
// which can be made optional or configured is done through Sass variables.
//**********************************************************************************************************************

// Primary styling for the page and preliminary styling of some commonly used basic elements and layout classes.
@import 'mixins-common';
//**********************************************************************************************************************
// HTML and BODY structure
// It is important that at least the height rules remain as we need to have the document body fill the viewport in all
// browsers to correctly propagate some click events. Please leave this as it is.
html {
	height: 100%;
}

body {
	@include tight-box;
	background-color: $wc-ui-color-global-bg;
	color: $wc-ui-color-global-fg;
	font-family: $wc-default-font;
	@if ($wc-desktop-font-size != 100%) {
		font-size: $wc-desktop-font-size;
	}
	height: 100%; // body to fill viewport for event propagation.
}
// END HTML and BODY structure.
//**********************************************************************************************************************

//**********************************************************************************************************************
// LINKS (`a` element not `link` element)
// The order of these matters even though it looks wrong. By defining :visited before a we do not have to do a double
// override of the disabled state. Disabled links. Gotta love the monkey who came up with that one.
//**********************************************************************************************************************
@if  $wc-ui-color-link-visited != -1 {
	a:visited {
		color: $wc-ui-color-link-visited;
	}
}

@if  $wc-ui-color-link != -1 {
	a {
		color: $wc-ui-color-link;

		&[aria-disabled='true'] { // NOTE: we need the disabled color to override the :visited state
			color: $wc-ui-color-disabled-fg;
		}
	}
}
// END links
//**********************************************************************************************************************

//**********************************************************************************************************************
// Classes needed by the framework. These are structural and must aways be present, preferably in this form.
//**********************************************************************************************************************
// Move an element out of viewport but still in the accessibility tree. This is a surprisingly important class and MUST
// be present and MUST move things out of viewport without removing them from the a11y tree so you probably want to
// leave the thing alone.
.wc-off {
	@include offscreen;
}

// [hidden] hides content and removes it from the a11y tree. Applying this to [hidden] is redundant but needed because
// of irregular hidden support. It is important to override more specific selectors for individual components. Again,
// this is needed for re-applying hidden after it has been removed.
[hidden] {
	// important required to override more specific display rules (see menus, collapsibles for examples)
	// scss-lint:disable ImportantRule
	display: none !important;
}

// Text alignment
// These are required for WComponents inbuilt alignment and are not a complete list of CSS3 text alignment options.
// Not to be overridden therefore no !default marker.
$wc-align-list: left, center, right;
@each $wc-a in $wc-align-list {
	.wc-align-#{$wc-a} {
		text-align: $wc-a;
	}
}

// ICON POSITIONING CLASSES.
// You probably want these in some form, almost certainly this form. The class names are inteh Java API.
.wc-icon:before,
.wc-icon-before:before,
.wc-icon-after:before {
	@include wc-icon;
}

.wc-icon-before:before {
	margin-right: $wc-gap-small;
}

.wc-icon-after:before {
	float: right;
	margin-left: $wc-gap-small;
}

// Make a container scroll horizontally if needed. One would be surprised how often this is requested if one was not me.
// It is so common it has made it into the Java API so do not remove it!
.wc-hscroll {
	max-width: 100%;
	overflow-x: auto;
}

//**********************************************************************************************************************
// COMMON element styles.
// Change any of these you like. The defaults are pretty basic.
// TODO: move to a separate file? We want as much of this file as possible to be completely standard so it never needs
// to be overridden.
p {
	margin: 0 0 $wc-gap-large;
}

pre {
	font-family: $wc-mono-font;
}


//**********************************************************************************************************************
// Common classes which can be ignored or overridden.

// Mark an error state. This is a secondary indicator of an error state separate from the aria-invalid state. It is used
// when the maxlength is exceeded in a textarea or when a label (or equivalent) is not provided. This has to be present
// but the actual style does not matter a lot. Eventually we should be able to remove the missing label warnings and
// move this to textarea only.
@if $wc-ui-color-error-fg != -1 {
	.wc_error {
		color: $wc-ui-color-error-fg;
	}
}

// Vertical alignment helpers. Not used by FlowLayout for its vertical alignment control which is flex based. May be
// omitted by setting the list variable to 0.
@if ($wc-valign-list != 0) {
	@each $wc-v in $wc-valign-list {
		.wc-valign-#{$wc-v} {
			vertical-align: $wc-v;
		}
	}
}
// End optional classes
//**********************************************************************************************************************


// This is non-standard but quite important. Zoom should not be disabled in a web appno matter how much pain it causes
// designers. It is an a11y thing and I cannot use your site on my phone without it.
// cannot use a mixin with Vaadin Sass compiler.
@-ms-viewport {
	user-zoom: zoom;
	width: extend-to-zoom;
	zoom: 1;
}

@viewport {
	user-zoom: zoom;
	width: extend-to-zoom;
	zoom: 1;
}

@if ($wc-bigscreen-font-size != -1 and $wc-bigscreen-font-size != $wc-desktop-font-size) {
	@include respond-bigger-screen {
		body {
			font-size: $wc-bigscreen-font-size;
		}
	}
}

@if ($wc-phone-font-size != -1 and $wc-phone-font-size != $wc-desktop-font-size) {
	@include respond-phonelike {
		body {
			font-size: $wc-phone-font-size;
		}
	}
}

@import 'wc.ui.backToTop';
@import 'wc.common.loading';
@import 'wc.common.color';
