/**
 * @class Global_CSS
 */

@import 'mixins/border';
@import 'mixins/font';
@import 'mixins/font-icon';
@import 'mixins/icon';
@import 'mixins/transform';
@import 'mixins/animation';

// 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() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@mixin st-inline-box() {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

@mixin st-box-align($align: stretch) {
    -webkit-box-align: $align;
    -ms-flex-align: $align;
    @if $align == start {
        align-items: flex-start;
    }
    @else if $align == end {
        align-items: flex-end;
    }
    @else {
        align-items: $align;
    }
}

@mixin st-box-orient($orient: horizontal, $important: no) {
    @if $important == important {
        -webkit-box-orient: $orient !important;
        @if $orient == horizontal {
            -ms-flex-direction: row !important;
            flex-direction: row !important;
        } @else {
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }
    } @else {
        -webkit-box-orient: $orient;
        @if $orient == horizontal {
            -ms-flex-direction: row;
            flex-direction: row;
        } @else {
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }
}

@mixin st-box-pack($pack: start, $important: no) {
    @if $important == important {
        -webkit-box-pack: $pack !important;
        -ms-flex-pack: $pack !important;
        @if $pack == start {
            justify-content: flex-start !important;
        }
        @else if $pack == end {
            justify-content: flex-end !important;
        }
        @else if $pack == justify {
            justify-content: space-between !important;
        }
        @else {
            justify-content: $pack !important;
        }
    } @else {
        -webkit-box-pack: $pack;
        -ms-flex-pack: $pack;
        @if $pack == start {
            justify-content: flex-start;
        }
        @else if $pack == end {
            justify-content: flex-end;
        }
        @else if $pack == justify {
            justify-content: space-between;
        }
        @else if $pack == center {
            justify-content: center;
        }
        @else {
            justify-content: $pack;
        }
    }
}

@mixin st-box-flex($flex: 1, $preferredSize: auto, $important: no) {
    @if $important == important {
        -webkit-box-flex: $flex !important;
        flex: $flex $flex $preferredSize !important;
    } @else {
        -webkit-box-flex: $flex;
        flex: $flex $flex $preferredSize;
    }
}

@mixin st-box-shadow($shadow: none) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin st-box-direction($direction: normal, $orientation: row) {
    -webkit-box-direction: $direction;
    @if $direction == reverse {
        @if $orientation == row {
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        } @else {
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
        }
    } @else {
        @if $orientation == row {
            -ms-flex-direction: row;
            flex-direction: row;
        } @else {
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }
}

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