/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

/*
 Global placeholders
 */
%accessible-invisible {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

%accessible-invisible-show {
	clip: rect(auto, auto, auto, auto);
	height: inherit;
	margin: inherit;
	overflow: inherit;
	position: static;
	width: inherit;
}

%global-display-none {
	display: none;
}

%global-display-block {
	display: block;
}

%global-display-block-important {
	display: block !important;
}

%global-text-decoration-none {
	text-decoration: none;
}

%global-centered-overlay-container {
	bottom: 0;
	content: " ";
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}

%global-centered-overlay {
	&:after {
		@extend %global-centered-overlay-container;
		z-index: 1;
	}

	&:before {
		@extend %global-centered-overlay-container;
		background: rgba(0, 0, 0, .7);
		border-radius: 10px;
	}
}

@keyframes spin {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

/* TODO: Use bootstratp placeholder when nested extends are supproted */
%global-loading {
	@extend %global-centered-overlay;

	&:after {
		animation: {
			duration: 500ms;
			iteration-count: infinite;
			name: spin;
			timing-function: linear;
		}
		color: #fff;
		content: "\e031";
		font: {
			family: "Glyphicons Halflings";
			size: 3.5em;
		}
		height: 1em;
		line-height: 1.03;
		width: 1em;
		z-index: 2;
	}
}

/*! WET-BOEW Core and Plugins */
@import "accessibility/base";
@import "breadcrumb/base";
@import "language-selector/base";
@import "sign-in-off/base";
@import "ellipsis/base";
@import "transitions/base";
@import "proximity/base";
@import "lists/base";
@import "forms/base";
@import "details/base";

/*
 Plugins
 */
@import "../plugins/cal-events/base";
@import "../plugins/calendar/base";
@import "../plugins/charts/base";
@import "../plugins/collapsible-alerts/base";
@import "../plugins/dismissable-content/base";
@import "../plugins/equalheight/base";
@import "../plugins/filter/base";
@import "../plugins/footnotes/base";
@import "../plugins/formvalid/base";
@import "../plugins/lightbox/base";
@import "../plugins/menu/base";
@import "../plugins/multimedia/base";
@import "../plugins/overlay/base";
@import "../plugins/prettify/base";
@import "../plugins/resize/base";
@import "../plugins/share/base";
@import "../plugins/tables/base";
@import "../plugins/tabs/base";
@import "../plugins/twitter/base";
@import "../plugins/texthighlight/base";
@import "../plugins/geomap/base";
@import "../plugins/zebra/base";
@import "../plugins/feeds/base";

/*
 Polyfills
 */
@import "../polyfills/datalist/base";
@import "../polyfills/details/base";
@import "../polyfills/datepicker/base";

/*
 Views
 */
/* All screen views */
@media screen {
	@import "views/screen";
	@import "../plugins/prettify/screen";
	@import "../plugins/tabs/screen";
}

/* Extra-small view and under */
@media screen and (max-width: $screen-xs-max) {
	@import "views/screen-xs-max";
}

/* Small view and under */
@media screen and (max-width: $screen-sm-max) {
	@import "views/screen-sm-max";
	@import "../plugins/tables/screen-sm-max";
	@import "../plugins/tabs/screen-sm-max";
}

/* Medium view and under */
@media screen and (max-width: $screen-md-max) {
	@import "views/screen-md-max";
}

/* Large view and under */
@media screen and (max-width: $screen-lg-max) {
	@import "views/screen-lg-max";
}

/* Extra-small view and over */
@media screen and (min-width: $screen-xs-min) {
	@import "views/screen-xs-min";
	@import "proximity/screen-xs-min";
	@import "../plugins/menu/screen-xs-min";
	@import "../plugins/tables/screen-xs-min";
}

/* Small view and over */
@media screen and (min-width: $screen-sm-min) {
	@import "views/screen-sm-min";
	@import "proximity/screen-sm-min";
}

/* Medium view and over */
@media screen and (min-width: $screen-md-min) {
	@import "views/screen-md-min";
	@import "proximity/screen-md-min";
	@import "../plugins/feeds/screen-md-min";
	@import "../plugins/tabs/screen-md-min";
}

/* Large view and over */
@media screen and (min-width: $screen-lg-min) {
	@import "views/screen-lg-min";
	@import "proximity/screen-lg-min";
}

/* Extra-extra-small view */
@media screen and (max-width: $screen-xxs-max) {
	@import "views/screen-xxs-max";
	@import "../plugins/menu/screen-xxs-max";
	@import "../plugins/tables/screen-xxs-max";
	@import "../plugins/tabs/screen-xxs-max";
}

/* Extra-small view */
@media screen and (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
	@import "views/screen-xs-min-to-screen-xs-max";
}

/* Small view */
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
	@import "views/screen-sm-min-to-screen-sm-max";
}

/* Medium view */
@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
	@import "views/screen-md-min-to-screen-md-max";
}

/* Large view */
@media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
	@import "views/screen-lg-min-to-screen-lg-max";
}

/* Extra-large view */
@media screen and (min-width: $screen-xl-min) {
	@import "views/screen-xl-min";
	@import "proximity/screen-xl-min";
}

/* Print view */
@media print {
	@import "views/print";
	@import "breadcrumb/print";
	@import "../plugins/footnotes/print";
	@import "../plugins/geomap/print";
	@import "../plugins/lightbox/print";
	@import "../plugins/multimedia/print";
	@import "../plugins/overlay/print";
	@import "../plugins/prettify/print";
	@import "../plugins/tabs/print";
}