/* wc.common.page.scss */
// Primary styling for the page and preliminary styling of some commonly used basic elements and layout classes.
@import 'mixins-common';

// We need to have the document body fill the viewport in all browsers to correctly propagate some click events.
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;
	font-size: $wc-desktop-font-size;
	height: 100%; // body to fill viewport for event propagation.
}

@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;
		}
	}
}

p {
	margin: 0 0 $wc-gap-large;
}

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

.wc-off {
	@include offscreen;
}

// Text alignment
$wc-align-list: left, center, right;
@each $wc-a in $wc-align-list {
	.wc-align-#{$wc-a} {
		text-align: $wc-a;
	}
}

// vertical alignment. This list covers the CSS3 vertical-alignment values. You may not need or want all of them.
$wc-valign-list: baseline, bottom, inherit, initial, middle, sub, super, text-bottom, text-top, top !default;

@each $wc-v in $wc-valign-list {
	.wc-valign-#{$wc-v} {
		vertical-align: $wc-v;
	}
}

.wc-hscroll {
	max-width: 100%;
	overflow-x: auto;
}

.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;
}

// [hidden] hides content. Class .wc-off moves the content so it is still available to assistive technologies but is not
// visible on screen. 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;
}

// show when the maxlength is exceeded in a textarea or when a label (or equivalent) is not provided
@if $wc-ui-color-error-fg != -1 {
	.wc_error {
		color: $wc-ui-color-error-fg;
	}
}

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

@include respond-bigger-screen {
	body {
		font-size: $wc-bigscreen-font-size;
	}
}

@include respond-phonelike {
	body {
		font-size: $wc-default-font-size;
	}
}
