@mixin lt768 {
    @media (max-width: 767px) {
        @content;
    }
}

@mixin lt992 {
    @media (max-width: 991px) {
        @content;
    }
}

@mixin lt1200 {
    @media (max-width: 1199px) {
        @content;
    }
}

@mixin gt1400 {
    @media (min-width: 1401px) {
        @content;
    }
}

@mixin centerhv() {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    --webkit-transform: translate(-50%, -50%);
    --moz-transform: translate(-50%, -50%);
    --ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@mixin centerh() {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    --webkit-transform: translate(-50%, 0);
    --moz-transform: translate(-50%, 0);
    --ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

@mixin centerv() {
    top: 50%;
    -webkit-transform: translate(0, -50%);
    --webkit-transform: translate(0, -50%);
    --moz-transform: translate(0, -50%);
    --ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

@mixin boxshadow($h, $v, $b, $s, $color) {
    -webkit-box-shadow: $h $v $b $s $color;
    -moz-box-shadow: $h $v $b $s $color;
    box-shadow: $h $v $b $s $color;
}

@mixin no-boxshadow() {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@mixin bggradient($color1, $color2) {
    background: -webkit-linear-gradient($color1, $color2);
    background: -o-linear-gradient($color1, $color2);
    background: -moz-linear-gradient($color1, $color2);
    background: linear-gradient($color1, $color2);
    background-repeat: no-repeat;
}

@mixin transition($property, $duration, $type, $delay) {
    -webkit-transition: $property $duration $type $delay;
    -moz-transition: $property $duration $type $delay;
    -o-transition: $property $duration $type $delay;
    transition: $property $duration $type $delay;
}


@mixin spinner($radius, $color1, $color2, $width) {
    border-top: $radius solid $color1;
    border-right: $radius solid $color1;
    border-bottom: $radius solid $color1;
    border-left: $radius solid $color2;
    border-radius: 50%;
    -webkit-animation: spinning 1s infinite linear;
    -moz-animation: spinning 1s infinite linear;
    -o-animation: spinning 1s infinite linear;
    animation: spinning 1s infinite linear;
    &:after{
        border-radius: 50%;
        content: "";
        display:block;
        position: absolute;
        top: -($radius - $width);
        left: -($radius - $width);
        right: -($radius - $width);
        bottom: -($radius - $width);
        background: $color1;

    }
}

@mixin spinning {
    0% {
        -webkit-transform: rotate(0deg);
        --webkit-transform: rotate(0deg);
        --moz-transform: rotate(0deg);
        --ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        --webkit-transform: rotate(360deg);
        --moz-transform: rotate(360deg);
        --ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinning { @include spinning; }
@-moz-keyframes spinning { @include spinning; }
@-o-keyframes spinning { @include spinning; }
@keyframes spinning { @include spinning; }

/* Latest Orchard Mixins */

// Set background, box-shadow and text color for buttons
@mixin button-layout($bg-color, $text-color) {

    @if $bg-color == #fff {
        $shadow-value-static: 0.25;
        $shadow-value-hover: $shadow-value-static + 0.05;
        $shadow-value-active: $shadow-value-hover + 0.05;
    }

    @else {
        $shadow-value-static: 0.4;
        $shadow-value-hover: $shadow-value-static + 0.05;
        $shadow-value-active: $shadow-value-hover + 0.05;
    }

    @include box-shadow(0 1px 2px rgba(0,0,0,$shadow-value-static));

    background-color: $bg-color;
    color: $text-color;

    &:hover,
    &:focus {
        @include box-shadow(0 1px 4px rgba(0,0,0,$shadow-value-hover));

        background-color: $bg-color;
    }

    &:active {
        @include box-shadow(0 1px 6px rgba(0,0,0,$shadow-value-active));

        background-color: darken($bg-color, 6%);
    }

    &.disabled,
    &[disabled] {
        @include box-shadow(none);
    }

}

// Vertically center an element
@mixin vertical-align() {
    @include transform(translateY(-50%));

    position: relative;
    top: 50%;
}

// For truncating long entries with ellipses
@mixin ellipsis() {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}
// Parent element will need to have its width set in order for this to work

// Paint a non-link element to look like a link element
@mixin text-link() {
    color: $blue-medium;
    cursor: pointer;
    text-decoration: underline;
}

// For diabling default, primary and danger button
@mixin disabled-button($bg-color, $border-color, $font-color) {
    &:hover,
    &:focus,
    &:active {
        background-color: $bg-color;
        border-color: $border-color;
        box-shadow : 0 1px 0 rgba(0, 0, 0, 0.13);
        color: $font-color;
    }
}

// This is a common @mixin to style help text under form fields.
@mixin helptext() {
    font-size: 11px;
    color: $headings-color;
}

// For rejection and correction style
@mixin rejection-correction-style($bg-color, $padding) {
    background: $bg-color;
    border: 1px dashed $gray-darker;
    border-radius: 5px;
    padding: $padding;
}

// For Buttons Glyphicons size
@mixin btn-glyphicon($icon-size) {
    .glyphicon {
        font-size: $icon-size;
    }
}