/**
 * @class Global_CSS
 */
 
@import 'mixins/border';
@import 'mixins/outline';
@import 'mixins/font';
@import 'mixins/font-icon';
@import 'mixins/icon';
@import 'mixins/transform';
 
// Background property support for vendor prefixing within values. 
@mixin background($background-1,
$background-2: false,
$background-3: false,
$background-4: false,
$background-5: false,
$background-6: false,
$background-7: false,
$background-8: false,
$background-9: false,
$background-10: false) {
	$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10);
	$mult-bgs: -compass-list-size($backgrounds) > 1;
	$add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
	@if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {
		background: -svg($backgrounds);
	}
	@if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {
		background: -owg($backgrounds);
	}
	@if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {
		background: -webkit($backgrounds);
	}
	@if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {
		background: -moz($backgrounds);
	}
	@if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {
		background: -o($backgrounds);
	}
	// BEGIN PATCH 
	// IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon 
	// this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with 
	// proper support 
	background: -ms-#{$backgrounds};
	// END PATCH 
	@if $experimental-support-for-pie          and $add-pie-bg                     {
		-pie-background: -pie($backgrounds);
	}
	background: $backgrounds;
}
 
@mixin background-image($image-1,
$image-2: false,
$image-3: false,
$image-4: false,
$image-5: false,
$image-6: false,
$image-7: false,
$image-8: false,
$image-9: false,
$image-10: false) {
	$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
	$add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;
 
	@if $experimental-support-for-svg          and prefixed(-svg,    $images) {
		background-image: -svg($images);
		background-size: 100%;
	}
	@if $support-for-original-webkit-gradients and prefixed(-owg,    $images) {
		background-image: -owg($images);
	}
	@if $experimental-support-for-webkit       and prefixed(-webkit, $images) {
		background-image: -webkit($images);
	}
	@if $experimental-support-for-mozilla      and prefixed(-moz,    $images) {
		background-image: -moz($images);
	}
	@if $experimental-support-for-opera        and prefixed(-o,      $images) {
		background-image: -o($images);
	}
 
	// BEGIN PATCH 
	// IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon 
	// this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with 
	// proper support 
	background-image: -ms-#{$images};
	// END PATCH 
 
	@if $experimental-support-for-pie          and $add-pie-bg                {
		@warn "PIE does not support background-image. Use @include background(#{$images}) instead."
	}
}
 
/**
 * Adds basic styles to :before or :after pseudo-elements.
 *
 *     .my-element:after {
 *       @include insertion(50px, 50px);
 *     }
 *
 * @param {measurement} $width Height of pseudo-element.
 * @param {measurement} $height Height of pseudo-element.
 * @param {measurement} $top Top positioning of pseudo-element.
 * @param {measurement} $left Left positioning of pseudo-element.
 *
 */
@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
    content: '';
    position: absolute;
    width: $width;
    height: $height;
    top: $top;
    left: $left;
}
 
@mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0) {
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}
 
@mixin absolute-fit {
    width: auto;
    height: auto;
    @include absolute-position;
}
 
@mixin st-box-shadow($shadow: none) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
 
@mixin st-loading-spinner($spinner-size: 50px, $color: #ccc, $bar-width: 5px, $bar-height: 15px) {
    .x-loading-spinner {
        font-size: 250%;
        height: $spinner-size;
        width: $spinner-size;
        position: relative;
 
        -webkit-transform-origin: $spinner-size/2 $spinner-size/2;
        transform-origin: $spinner-size/2 $spinner-size/2;
 
        /* Shared Properties for all the bars */
        & > span,
        & > span:before,
        & > span:after {
            display: block;
            position: absolute;
            width: $bar-width;
            height: $bar-height;
            top: 0;
            -webkit-transform-origin: $bar-width/2 $spinner-size/2;
            transform-origin: $bar-width/2 $spinner-size/2;
            content: " ";
        }
 
        & > span {
            left:         50%;
            margin-left:  -0.05em;
 
            &.x-loading-top           { background-color: rgba($color, 0.99); }
            &.x-loading-top::after    { background-color: rgba($color, 0.90); }
            &.x-loading-left::before  { background-color: rgba($color, 0.80); }
            &.x-loading-left          { background-color: rgba($color, 0.70); }
            &.x-loading-left::after   { background-color: rgba($color, 0.60); }
            &.x-loading-bottom::before{ background-color: rgba($color, 0.50); }
            &.x-loading-bottom        { background-color: rgba($color, 0.40); }
            &.x-loading-bottom::after { background-color: rgba($color, 0.35); }
            &.x-loading-right::before { background-color: rgba($color, 0.30); }
            &.x-loading-right         { background-color: rgba($color, 0.25); }
            &.x-loading-right::after  { background-color: rgba($color, 0.20); }
            &.x-loading-top::before   { background-color: rgba($color, 0.15); }
        }
    }
 
    /* Rotate each of the 4 Spans */
    .x-loading-spinner > span.x-loading-top {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .x-loading-spinner > span.x-loading-right {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .x-loading-spinner > span.x-loading-bottom {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .x-loading-spinner > span.x-loading-left {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
 
    /* These are the two lines that surround each of the 4 Span lines */
    .x-loading-spinner > span::before {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .x-loading-spinner > span::after {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
 
    /* Set Animation */
    .x-loading-spinner {
        -webkit-animation-name: x-loading-spinner-rotate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
 
        animation-name: x-loading-spinner-rotate;
        animation-duration: .5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}
 
@mixin font-family($name, $path, $font) {
  $path: $path + '/' + $font;
  @font-face {
    font-family: $name;
    src: url($path + '.eot');
    src: url($path + '.eot?#iefix') format('embedded-opentype'),
    url($path + '.woff') format('woff'),
    url($path + '.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
}
 
@mixin icon-font($name, $font) {
    @include font-family($name, 'fonts', $font);
}