/** 
 * 
 * 01. Extended style rules
 *
 */

// Transitions
%simple-transition {
	@include transition(all 0.1s ease);
}

%link-transition {
	@include transition(all $duration-all $fn-cubic);
}

%transition-transform {
	@include transition(transform $duration-transform $fn-cubic);
}

// Helpers
%outline {
	outline: thin dotted;
	outline: 5px auto;
	outline-offset: -2px;
	outline-color: #EEE;
}
%outline-none {
	outline: 0;
}

%abs-cover-parent {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

%text-theme {
	@extend %uppercase;
	font-weight: 900;
}

%uppercase {
	text-transform: uppercase;

	.no-theme-caps & {
		text-transform: none;
	}
}

%opacity-animate-visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

%dropdown-hidden {
	visibility: hidden;
	opacity: 0;
	display: block;
	@include transition(opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s);
}

%dropdown-visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

%image-on-ready {
	@include transition(transform $duration-transform $fn-cubic, opacity $duration-transform $fn-cubic);
	-webkit-backface-visibility: hidden; // Safari 9 is reported to still require a prefix for the related backface-visibility property.
	backface-visibility: hidden;
}

%image-on-hover {
	@include transform(scale($woo-image-scale-hover));
}

%ext-overlay-bg {
	@extend %abs-cover-parent;
	content: '';
	background-color: #000;
	z-index: -1;
}

.invisible {
	visibility: hidden;
}

// Alignment
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

.text-left-mobile-center {
	text-align: left;

	@include until($bp-xs) {
		text-align: center;		
	}
}

.text-right-mobile-center {
	text-align: right;

	@include until($bp-xs) {
		text-align: center;		
	}
}

// Clearing
%clear {
	clear: both;
}
.clear {
	@extend %clear;
}

// Fonts
%font-stack-body {
	/* font-stack-body */
	font-family: $font-stack-body;
}

// Colors
.color-primary-ext-fg {
	/* redux[color: main_theme_color] */
	color: $color-primary;
}

.color-primary-ext-bg {
	/* redux[background-color: main_theme_color] */
	background-color: $color-primary;
}

.color-primary-ext-border {
	/* redux[border-color: main_theme_color] */
	border-color: $color-primary;
}

.color-secondary-ext-fg {
	/* redux[color: secondary_theme_color] */
	color: $color-secondary;
}

.color-secondary-ext-bg {
	/* redux[background-color: secondary_theme_color] */
	background-color: $color-secondary;
}

.color-link-ext-fg {
	/* redux[color: main_theme_color] */
	color: $color-primary;
}

.color-link-hover-ext-fg {
	/* color-link-hover-ext-fg */
	color: $color-darker-gray;
}

// Form controls
%form-control-base {
	border-color: $color-light-gray;
	border-width: 0;
	border-style: solid;
	border-radius: 0;

	text-shadow: none;
	box-shadow: none;
	
	-webkit-font-smoothing: antialiased;
}

%form-control-buttons {
	@extend %form-control-base;
}

%form-control-input {
	@extend %form-control-base;
	padding: 1.65em 1em;
	font-size: 14px;
	background-color: $color-bg-form-controls;

	.dark & {
		background-color: $color-bg-form-controls-dark;

		&:focus {
			background-color: lighten( $color-bg-form-controls-dark, 10% );
		}
	}
}

%button {
	// Generic styles that wont need to be overriden
	@extend %uppercase;
	@extend %text-theme;
	text-decoration: none;
}

// Elements
%tooltip {
	@extend %uppercase;
	display: inline-block;
	position: absolute;
	background-color: $color-darker-gray;
	color: #fff;
	font-weight: 800;
	padding: 6px 11px;
	white-space: nowrap;
	font-size: 80%;			
	text-align: right;
	line-height: 16px;	
	z-index: 90;	
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.tooltip {
	@include tooltip();
	@include tooltip-left();
}

%section-title {
	@extend %text-theme;
	display: inline-block;
	font-size: 20px;
	text-align: center;
	letter-spacing: 1.5px;
	margin: 1em auto 4em auto;
	padding: 0 0 1em 0;
	position: relative;
	color: $color-darker-gray;
	border-bottom: 2px solid $color-darker-gray;
}

.section-title {
	@extend %section-title;
}

.theme-sep {
	@include theme-sep();
}

.no-forced-uppercase {
	text-transform: initial;
}

// Overlay Background
.overlay-10:after { @extend %ext-overlay-bg; opacity: 0.1; }
.overlay-20:after { @extend %ext-overlay-bg; opacity: 0.2; }
.overlay-30:after { @extend %ext-overlay-bg; opacity: 0.3; }
.overlay-40:after { @extend %ext-overlay-bg; opacity: 0.4; }
.overlay-50:after { @extend %ext-overlay-bg; opacity: 0.5; }
.overlay-60:after { @extend %ext-overlay-bg; opacity: 0.6; }
.overlay-70:after { @extend %ext-overlay-bg; opacity: 0.7; }
.overlay-80:after { @extend %ext-overlay-bg; opacity: 0.8; }
.overlay-90:after { @extend %ext-overlay-bg; opacity: 0.9; }
.overlay-100:after { @extend %ext-overlay-bg; opacity: 1; }