@mixin font-normal {
    font-family: 'OpenSans', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

@mixin transition-simple($transition...) {
    -webkit-transition: $transition;
    transition: $transition;
}

@mixin transition-slow($prop: all, $duration: 1s) {
    -webkit-transition: $prop $duration ease-out;
    transition: $prop $duration ease-out;
}

@mixin transition-fast($prop: all) {
    -webkit-transition: $prop 0.6s ease-out;
    transition: $prop 0.6s ease-out;
}

@mixin transition-none($prop: all) {
    -webkit-transition: all 0.001s ease-out;
    transition: all 0.001s ease-out;
}

@mixin transition-background-color {
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

@mixin rotate($value) {
    -webkit-transform: rotate($value);
    -ms-transform: rotate($value);
    -moz-transform: rotate($value);
    transform: rotate($value);
}

@mixin background-size($size...) {
    -webkit-background-size: $size;
    -moz-background-size: $size;
    -o-background-size: $size;
    background-size: $size;
}

@mixin paper-border($radius: 7px, $color:#ddd) {
    border-radius: $radius;
    border: $radius solid $color;
}

@mixin border-box {
    -moz-box-sizing: border-box; //-webkit-box-sizing: border-box;
    //-ms-box-sizing: border-box;
    box-sizing: border-box;
}

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

// Box sizing
@mixin box-sizing($boxmodel) {
    -webkit-box-sizing: $boxmodel;
    -moz-box-sizing: $boxmodel;
    box-sizing: $boxmodel;
}

@mixin box-shadow-touch {
    //-webkit-box-shadow: inset 0 -1px 0 rgba(90, 90, 90, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    //-moz-box-shadow: inset 0 -1px 0 rgba(90, 90, 90, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 -1px 0 rgba(90, 90, 90, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}

@mixin tab-focus {
    // Default
    outline: thin dotted; // WebKit
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

@mixin clearfix {

    &:before,
    &:after {
        content: " "; // 1
        display: table; // 2
    }

    &:after {
        clear: both;
    }
}

@mixin input-as-text {
    border: none;
    background: none;
    width: auto;
    height: auto;
    opacity: 1;
    padding: 0 1em;
    margin: 0;
    box-shadow: none;
    line-height: 1;
    display: inline;
    float: none;
    border-radius: 0;
    transition: none;

    &:hover {
        background: none;
    }
}

@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@mixin text-hide {
    font: #{0 / 0} a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@mixin appearance-none {
    @include appearance(none)
}

@mixin appearance($appearance) {
    appearance: $appearance;
    -moz-appearance: $appearance;
    -webkit-appearance: $appearance;
    -ms-appearance: $appearance;
}

@mixin display-flex {
    /*IE10*/
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin display-inline-flex {
    /*IE10*/
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

@mixin flex($value, $total: null) {
    $flex: 100%;

    @if $total==null {
        $flex: $value;
    }

    @else if $total>=$value {
        $flex: percentage($value / $total);
    }

    -webkit-flex: $flex;
    -ms-flex: $flex;
    flex: $flex;
}

@mixin flex_IEhack($value, $total: null) {
    $flex: 100%;

    @if $total==null {
        $flex: $value;
    }

    @else if $total>=$value {
        $flex: percentage($value / $total);
    }

    flex-grow: 1;
    flex-shrink: 1;
    // Internet Explorer 11 has a box-sizing issue with multiline flexboxes
    // box-sizing: border-box is ignored
    // 2 x 6px padding + 1 border = 13px adjustment
    -ms-flex-preferred-size: calc(#{$flex} - 13px);
    -ms-flex-positive: 1;
    -ms-flex-negative: 1;
    // unprefixed
    flex-basis: calc(#{$flex});
}

@mixin flex-wrap($wrap: wrap) {
    -webkit-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    flex-wrap: $wrap;
}

@mixin flex-direction($dir: row) {
    -webkit-flex-direction: $dir;
    -ms-flex-direction: $dir;
    -moz-flex-direction: $dir;
    flex-direction: $dir;
}

@mixin align-content($val: flex-start) {
    -webkit-align-content: $val;
    -ms-align-content: $val;
    -moz-align-content: $val;
    align-content: $val;
}

@mixin form-control {
    // just a placeholder
}

// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555555, $end-color: #333333, $start-percent: 0%, $end-percent: 100%) {
    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}

@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
    background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
    background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}

@mixin form-footer-margin($padding) {
    margin: $padding (-$padding) (-$padding) (-$padding);
}

@mixin form-header-margin($padding) {
    margin-left: -$padding;
    margin-right: -$padding;
    width: calc(100% + (2 * #{$padding}));
}

@mixin focus-shadow {
    // just a placeholder
}

// Moving this styles to a mixin facilitates custom functionality added in OpenClinica with multiple constraints.
@mixin question-invalid {
    @include transition-fast;

    background-color: $state-danger-bg;
    border-color: $state-danger-border;
    border-radius: $border-radius-small;

    $pad: 10px;

    margin-right: -$pad;
    margin-left: -$pad;
    padding-left: $pad;
    padding-right: $pad;
    padding-bottom: $pad;
}

// Moving this styles to a mixin facilitates custom functionality added in OpenClinica with multiple constraints.
@mixin question-error-message {
    font-weight: bold;
    padding-top: 5px;
    font-size: 0.85em;
    color: $state-danger-text;
}

// from https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be
// Replace letters
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

// from https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be
// Encode symbols
@function url-encode($string) {
    $map: ("%": "%25",
            "<": "%3C",
            ">": "%3E",
            " ": "%20",
            "!": "%21",
            "*": "%2A",
            "'": "%27",
            '"': "%22",
            "(": "%28",
            ")": "%29",
            ";": "%3B",
            ":": "%3A",
            "@": "%40",
            "&": "%26",
            "=": "%3D",
            "+": "%2B",
            "$": "%24",
            ",": "%2C",
            "/": "%2F",
            "?": "%3F",
            "#": "%23",
            "[": "%5B",
            "]": "%5D"
        );

    $new: $string;

    @each $search,
    $replace in $map {
        $new: str-replace($new, $search, $replace);
    }

    @return $new;
}

// Format the SVG as a URL
@function svg-as-url($string) {
    @return url('data:image/svg+xml,#{url-encode($string)}');
}