@import "mixins/icon";

/**
 * 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;
}

/**
 * Makes the element text overflow to use ellipsis.
 */
@mixin ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@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($important: no) {
    @if $important == important {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: -webkit-box;
        display: -ms-flexbox;
    }
}

@mixin st-box-align($align: stretch) {
    -webkit-box-align: $align;
    -ms-flex-align: $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;
        } @else {
            -ms-flex-direction: column !important;
        }
    } @else {
        -webkit-box-orient: $orient;
        @if $orient == horizontal {
            -ms-flex-direction: row;
        } @else {
            -ms-flex-direction: column;
        }
    }
}

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

@mixin st-box-flex($flex: 1, $preferredSize: auto, $important: no) {
    @if $important == important {
        -webkit-box-flex: $flex !important;
        -ms-flex: $flex 0 $preferredSize !important;
    } @else {
        -webkit-box-flex: $flex;
        -ms-flex: $flex 0 $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;
        } @else {
            -ms-flex-direction: column-reverse;
        }
    } @else {
        @if $orientation == row {
            -ms-flex-direction: row;
        } @else {
            -ms-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);    -moz-transform: rotate(0deg);   -ms-transform: rotate(0deg); }
    .x-loading-spinner > span.x-loading-right {  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg); }
    .x-loading-spinner > span.x-loading-bottom { -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); }
    .x-loading-spinner > span.x-loading-left {   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); -ms-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);   -moz-transform: rotate(30deg);  -ms-transform: rotate(30deg); }
    .x-loading-spinner > span::after { -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); -ms-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;
    }
}
