devbridge-styleguide/content/styles/snippet-styles.css.map

Styleguide automatization tool.

{"version":3,"file":"snippet-styles.css","sources":["snippet-styles.scss","core/_variables.scss","../node_modules/bourbon/app/assets/stylesheets/_bourbon.scss","../node_modules/bourbon/app/assets/stylesheets/settings/_prefixer.scss","../node_modules/bourbon/app/assets/stylesheets/settings/_px-to-em.scss","../node_modules/bourbon/app/assets/stylesheets/settings/_asset-pipeline.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_assign-inputs.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_contains.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_contains-falsy.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_is-length.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_is-light.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_is-number.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_is-size.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_px-to-em.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_px-to-rem.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_shade.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_strip-units.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_tint.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_transition-property-name.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_unpack.scss","../node_modules/bourbon/app/assets/stylesheets/functions/_modular-scale.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_convert-units.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_directional-values.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_font-source-declaration.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_gradient-positions-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_linear-angle-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_linear-gradient-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_linear-positions-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_linear-side-corner-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_radial-arg-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_radial-positions-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_radial-gradient-parser.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_render-gradients.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_shape-size-stripper.scss","../node_modules/bourbon/app/assets/stylesheets/helpers/_str-to-num.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_animation.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_appearance.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_backface-visibility.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_background.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_background-image.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_border-image.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_calc.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_columns.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_filter.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_flex-box.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_font-face.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_font-feature-settings.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_hidpi-media-query.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_hyphens.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_image-rendering.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_keyframes.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_perspective.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_placeholder.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_radial-gradient.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_selection.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_text-decoration.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_transform.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_transition.scss","../node_modules/bourbon/app/assets/stylesheets/css3/_user-select.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_border-color.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_border-radius.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_border-style.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_border-width.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_buttons.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_clearfix.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_ellipsis.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_font-stacks.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_hide-text.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_margin.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_padding.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_position.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_prefixer.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_retina-image.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_size.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_text-inputs.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_timing-functions.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_triangle.scss","../node_modules/bourbon/app/assets/stylesheets/addons/_word-wrap.scss","../node_modules/bourbon/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss","../node_modules/bourbon-neat/app/assets/stylesheets/_neat.scss","../node_modules/bourbon-neat/app/assets/stylesheets/_neat-helpers.scss","../node_modules/bourbon-neat/app/assets/stylesheets/functions/_private.scss","../node_modules/bourbon-neat/app/assets/stylesheets/functions/_new-breakpoint.scss","../node_modules/bourbon-neat/app/assets/stylesheets/settings/_grid.scss","../node_modules/bourbon-neat/app/assets/stylesheets/settings/_visual-grid.scss","../node_modules/bourbon-neat/app/assets/stylesheets/settings/_disable-warnings.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_private.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_box-sizing.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_omega.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_outer-container.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_span-columns.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_row.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_shift.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_pad.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_fill-parent.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_media.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_to-deprecate.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_visual-grid.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_display-context.scss","../node_modules/bourbon-neat/app/assets/stylesheets/grid/_direction-context.scss"],"sourcesContent":["@charset \"utf-8\";\n@import 'core/variables';\n// Dependencies\n@import 'bourbon';\n@import 'neat';\n@import \"neat-helpers\";\n\n$tablet-1024-up: new-breakpoint(min-width 1025px);\n\nbody,\nhtml {\n    //height: 100%;\n    margin: 0;\n    overflow: hidden;\n    width: 100%;\n}\n\n.button-wrapper {\n    text-align: center;\n\n    > button {\n        vertical-align: top;\n\n        + button {\n            margin-left: 30px;\n        }\n    }\n\n    &.resize-overlay {\n        pointer-events: none;\n        position: relative;\n    }\n\n    @include media(new-breakpoint(max-width 440px)) {\n        margin: 0 auto;\n        max-width: 320px;\n\n        > button {\n            display: block;\n            width: 100%;\n\n            + button {\n                margin: {\n                    left: 0;\n                    top: 20px;\n                }\n            }\n        }\n\n        .btn-link {\n            line-height: 1;\n        }\n    }\n}\n\n.btn {\n    @include ellipsis();\n    @include transition(all .3s ease);\n    background-color: $color-pink;\n    border: 0;\n    border-radius: 50px;\n    color: $color-white;\n    display: inline-block;\n    font-size: 18px;\n    height: 48px;\n    line-height: (45 / 18);\n    padding: 0 43px;\n\n    @include media($tablet-1024-up) {\n        &:hover {\n            background-color: darken($color-pink, 25%);\n        }\n    }\n}\n\n.btn-secondary {\n    @include ellipsis();\n    @include transition(all .3s ease);\n    background-color: $color-white;\n    border: $color-pink solid 2px;\n    border-radius: 30px;\n    box-sizing: border-box;\n    color: $color-pink;\n    font-size: 18px;\n    height: 48px;\n    line-height: (48 / 18);\n    padding: 0 20px;\n    text-align: center;\n\n    @include media($tablet-1024-up) {\n        &:hover {\n            background-color: $color-pink;\n            border-color: $color-pink;\n            color: $color-white;\n        }\n    }\n}\n\n.btn-link {\n    @include transition(all .3s ease);\n    background: none;\n    border: 0;\n    color: $text-btn-link;\n    display: inline-block;\n    font-size: 18px;\n    line-height: (48 / 18);\n\n    @include media($tablet-1024-up) {\n        &:hover {\n            color: darken($text-btn-link, 25%);\n        }\n    }\n}\n","// global Variables\n$disable-warnings: true;\n$border-box-sizing: false !default;\n\n// module TYPOGRAPHY\n$base-line-height: (30 / 18);\n$base-font-size: 18px;\n\n// fonts\n$font-avenir: 'Avenir Next W01', sans-serif; // 500, 700, 800\n$font-droid: 'Droid Serif W01', sans-serif; // 400\n\n$heading-font: $font-avenir;\n\n$weight-light: 300;\n$weight-regular: 500;\n$weight-medium: 500;\n$weight-bold: 700;\n\n//module MAIN COLOR PALETTE\n$color-black: #292929;\n$color-black-100: #333;\n$color-black-100: #2d3335;\n$color-black-200: #010101;\n$color-blue: #3381ff;\n$color-light-blue: #29aae2;\n$color-light-gray: #f4f4f5;\n$color-white: #fff;\n$color-yellow: #f6dc44;\n$color-gray: #cdcccc;\n$color-gray-100: #989898;\n$color-pink: #f76cb5;\n\n//module TEXT COLORS\n$text-primary: $color-black;\n$text-link: $color-black;\n$text-list-number: $color-blue;\n$text-snippet-title: $color-blue;\n$text-button-link: $color-blue;\n$text-btn-show-code: $color-gray-100;\n$text-snippet-size: $color-black-200;\n$text-btn-link: $color-light-blue;\n$text-snippet-control-active: $color-black-200;\n\n$border-primary: $color-black;\n$border-btn-secondary: $color-blue;\n$border-snippet: $color-gray;\n$snippet-active: $color-light-blue;\n\n$bg-primary: $color-light-gray;\n$bg-secondary: $color-black-100;\n$bg-primary-button: $color-blue;\n$bg-snippet-editor: #eaeaea;\n\n//module LINK COLORS\n\n//module SELECTION COLORS\n\n// module ETC\n$max-width-content: 1100px;\n$snippet-box-width: 708px;\n$header-height-desktop: 85px;\n","// Bourbon 4.2.7\n// http://bourbon.io\n// Copyright 2011-2015 thoughtbot, inc.\n// MIT License\n\n@import \"settings/prefixer\";\n@import \"settings/px-to-em\";\n@import \"settings/asset-pipeline\";\n\n@import \"functions/assign-inputs\";\n@import \"functions/contains\";\n@import \"functions/contains-falsy\";\n@import \"functions/is-length\";\n@import \"functions/is-light\";\n@import \"functions/is-number\";\n@import \"functions/is-size\";\n@import \"functions/px-to-em\";\n@import \"functions/px-to-rem\";\n@import \"functions/shade\";\n@import \"functions/strip-units\";\n@import \"functions/tint\";\n@import \"functions/transition-property-name\";\n@import \"functions/unpack\";\n@import \"functions/modular-scale\";\n\n@import \"helpers/convert-units\";\n@import \"helpers/directional-values\";\n@import \"helpers/font-source-declaration\";\n@import \"helpers/gradient-positions-parser\";\n@import \"helpers/linear-angle-parser\";\n@import \"helpers/linear-gradient-parser\";\n@import \"helpers/linear-positions-parser\";\n@import \"helpers/linear-side-corner-parser\";\n@import \"helpers/radial-arg-parser\";\n@import \"helpers/radial-positions-parser\";\n@import \"helpers/radial-gradient-parser\";\n@import \"helpers/render-gradients\";\n@import \"helpers/shape-size-stripper\";\n@import \"helpers/str-to-num\";\n\n@import \"css3/animation\";\n@import \"css3/appearance\";\n@import \"css3/backface-visibility\";\n@import \"css3/background\";\n@import \"css3/background-image\";\n@import \"css3/border-image\";\n@import \"css3/calc\";\n@import \"css3/columns\";\n@import \"css3/filter\";\n@import \"css3/flex-box\";\n@import \"css3/font-face\";\n@import \"css3/font-feature-settings\";\n@import \"css3/hidpi-media-query\";\n@import \"css3/hyphens\";\n@import \"css3/image-rendering\";\n@import \"css3/keyframes\";\n@import \"css3/linear-gradient\";\n@import \"css3/perspective\";\n@import \"css3/placeholder\";\n@import \"css3/radial-gradient\";\n@import \"css3/selection\";\n@import \"css3/text-decoration\";\n@import \"css3/transform\";\n@import \"css3/transition\";\n@import \"css3/user-select\";\n\n@import \"addons/border-color\";\n@import \"addons/border-radius\";\n@import \"addons/border-style\";\n@import \"addons/border-width\";\n@import \"addons/buttons\";\n@import \"addons/clearfix\";\n@import \"addons/ellipsis\";\n@import \"addons/font-stacks\";\n@import \"addons/hide-text\";\n@import \"addons/margin\";\n@import \"addons/padding\";\n@import \"addons/position\";\n@import \"addons/prefixer\";\n@import \"addons/retina-image\";\n@import \"addons/size\";\n@import \"addons/text-inputs\";\n@import \"addons/timing-functions\";\n@import \"addons/triangle\";\n@import \"addons/word-wrap\";\n\n@import \"bourbon-deprecated-upcoming\";\n","@charset \"UTF-8\";\n\n/// Global variables to enable or disable vendor prefixes\n\n$prefix-for-webkit:    true !default;\n$prefix-for-mozilla:   true !default;\n$prefix-for-microsoft: true !default;\n$prefix-for-opera:     true !default;\n$prefix-for-spec:      true !default;\n","$em-base: 16px !default;\n","@charset \"UTF-8\";\n\n/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it.\n///\n/// @type Bool\n\n$asset-pipeline: false !default;\n","@function assign-inputs($inputs, $pseudo: null) {\n  $list: ();\n\n  @each $input in $inputs {\n    $input: unquote($input);\n    $input: if($pseudo, $input + \":\" + $pseudo, $input);\n    $list: append($list, $input, comma);\n  }\n\n  @return $list;\n}\n","@charset \"UTF-8\";\n\n/// Checks if a list contains a value(s).\n///\n/// @access private\n///\n/// @param {List} $list\n///   The list to check against.\n///\n/// @param {List} $values\n///   A single value or list of values to check for.\n///\n/// @example scss - Usage\n///   contains($list, $value)\n///\n/// @return {Bool}\n\n@function contains($list, $values...) {\n  @each $value in $values {\n    @if type-of(index($list, $value)) != \"number\" {\n      @return false;\n    }\n  }\n\n  @return true;\n}\n","@charset \"UTF-8\";\n\n/// Checks if a list does not contains a value.\n///\n/// @access private\n///\n/// @param {List} $list\n///   The list to check against.\n///\n/// @return {Bool}\n\n@function contains-falsy($list) {\n  @each $item in $list {\n    @if not $item {\n      @return true;\n    }\n  }\n\n  @return false;\n}\n","@charset \"UTF-8\";\n\n/// Checks for a valid CSS length.\n///\n/// @param {String} $value\n\n@function is-length($value) {\n  @return type-of($value) != \"null\" and (str-slice($value + \"\", 1, 4) == \"calc\"\n       or index(auto inherit initial 0, $value)\n       or (type-of($value) == \"number\" and not(unitless($value))));\n}\n","@charset \"UTF-8\";\n\n/// Programatically determines whether a color is light or dark.\n///\n/// @link http://robots.thoughtbot.com/closer-look-color-lightness\n///\n/// @param {Color (Hex)} $color\n///\n/// @example scss - Usage\n///   is-light($color)\n///\n/// @return {Bool}\n\n@function is-light($hex-color) {\n  $-local-red: red(rgba($hex-color, 1));\n  $-local-green: green(rgba($hex-color, 1));\n  $-local-blue: blue(rgba($hex-color, 1));\n  $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;\n\n  @return $-local-lightness > 0.6;\n}\n","@charset \"UTF-8\";\n\n/// Checks for a valid number.\n///\n/// @param {Number} $value\n///\n/// @require {function} contains\n\n@function is-number($value) {\n  @return contains(\"0\" \"1\" \"2\" \"3\" \"4\" \"5\" \"6\" \"7\" \"8\" \"9\" 0 1 2 3 4 5 6 7 8 9, $value);\n}\n","@charset \"UTF-8\";\n\n/// Checks for a valid CSS size.\n///\n/// @param {String} $value\n///\n/// @require {function} contains\n/// @require {function} is-length\n\n@function is-size($value) {\n  @return is-length($value)\n          or contains(\"fill\" \"fit-content\" \"min-content\" \"max-content\", $value);\n}\n","// Convert pixels to ems\n// eg. for a relational value of 12px write em(12) when the parent is 16px\n// if the parent is another value say 24px write em(12, 24)\n\n@function em($pxval, $base: $em-base) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1em;\n}\n","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","@charset \"UTF-8\";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of black to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: shade(#ffbb52, 60%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #664a20;\n///   }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n  @return mix(#000, $color, $percent);\n}\n","@charset \"UTF-8\";\n\n/// Strips the unit from a number.\n///\n/// @param {Number (With Unit)} $value\n///\n/// @example scss - Usage\n///   $dimension: strip-units(10em);\n///\n/// @example css - CSS Output\n///   $dimension: 10;\n///\n/// @return {Number (Unitless)}\n\n@function strip-units($value) {\n  @return ($value / ($value * 0 + 1));\n}\n","@charset \"UTF-8\";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n///   The amount of white to be mixed in.\n///\n/// @example scss - Usage\n///   .element {\n///     background-color: tint(#6ecaa6, 40%);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     background-color: #a8dfc9;\n///   }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n  @return mix(#fff, $color, $percent);\n}\n","// Return vendor-prefixed property names if appropriate\n// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background\n//************************************************************************//\n@function transition-property-names($props, $vendor: false) {\n  $new-props: ();\n\n  @each $prop in $props {\n    $new-props: append($new-props, transition-property-name($prop, $vendor), comma);\n  }\n\n  @return $new-props;\n}\n\n@function transition-property-name($prop, $vendor: false) {\n  // put other properties that need to be prefixed here aswell\n  @if $vendor and $prop == transform {\n    @return unquote('-'+$vendor+'-'+$prop);\n  }\n  @else {\n    @return $prop;\n  }\n}\n","@charset \"UTF-8\";\n\n/// Converts shorthand to the 4-value syntax.\n///\n/// @param {List} $shorthand\n///\n/// @example scss - Usage\n///   .element {\n///     margin: unpack(1em 2em);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     margin: 1em 2em 1em 2em;\n///   }\n\n@function unpack($shorthand) {\n  @if length($shorthand) == 1 {\n    @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);\n  } @else if length($shorthand) == 2 {\n    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);\n  } @else if length($shorthand) == 3 {\n    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);\n  } @else {\n    @return $shorthand;\n  }\n}\n","// Scaling Variables\n$golden:           1.618;\n$minor-second:     1.067;\n$major-second:     1.125;\n$minor-third:      1.2;\n$major-third:      1.25;\n$perfect-fourth:   1.333;\n$augmented-fourth: 1.414;\n$perfect-fifth:    1.5;\n$minor-sixth:      1.6;\n$major-sixth:      1.667;\n$minor-seventh:    1.778;\n$major-seventh:    1.875;\n$octave:           2;\n$major-tenth:      2.5;\n$major-eleventh:   2.667;\n$major-twelfth:    3;\n$double-octave:    4;\n\n$modular-scale-ratio: $perfect-fourth !default;\n$modular-scale-base: em($em-base) !default;\n\n@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {\n  $v1: nth($value, 1);\n  $v2: nth($value, length($value));\n  $value: $v1;\n\n  // scale $v2 to just above $v1\n  @while $v2 > $v1 {\n    $v2: ($v2 / $ratio); // will be off-by-1\n  }\n  @while $v2 < $v1 {\n    $v2: ($v2 * $ratio); // will fix off-by-1\n  }\n\n  // check AFTER scaling $v2 to prevent double-counting corner-case\n  $double-stranded: $v2 > $v1;\n\n  @if $increment > 0 {\n    @for $i from 1 through $increment {\n      @if $double-stranded and ($v1 * $ratio) > $v2 {\n        $value: $v2;\n        $v2: ($v2 * $ratio);\n      } @else {\n        $v1: ($v1 * $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @if $increment < 0 {\n    // adjust $v2 to just below $v1\n    @if $double-stranded {\n      $v2: ($v2 / $ratio);\n    }\n\n    @for $i from $increment through -1 {\n      @if $double-stranded and ($v1 / $ratio) < $v2 {\n        $value: $v2;\n        $v2: ($v2 / $ratio);\n      } @else {\n        $v1: ($v1 / $ratio);\n        $value: $v1;\n      }\n    }\n  }\n\n  @return $value;\n}\n","//************************************************************************//\n// Helper function for str-to-num fn.\n// Source: http://sassmeister.com/gist/9647408\n//************************************************************************//\n@function _convert-units($number, $unit) {\n  $strings: \"px\", \"cm\", \"mm\", \"%\", \"ch\", \"pica\", \"in\", \"em\", \"rem\", \"pt\", \"pc\", \"ex\", \"vw\", \"vh\", \"vmin\", \"vmax\", \"deg\", \"rad\", \"grad\", \"turn\";\n  $units:   1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn;\n  $index: index($strings, $unit);\n\n  @if not $index {\n    @warn \"Unknown unit `#{$unit}`.\";\n    @return false;\n  }\n\n  @if type-of($number) != \"number\" {\n    @warn \"`#{$number} is not a number`\";\n    @return false;\n  }\n\n  @return $number * nth($units, $index);\n}\n","@charset \"UTF-8\";\n\n/// Directional-property mixins are shorthands for writing properties like the following\n///\n/// @ignore You can also use `false` instead of `null`.\n///\n/// @param {List} $vals\n///   List of directional values\n///\n/// @example scss - Usage\n///   .element {\n///     @include border-style(dotted null);\n///     @include margin(null 0 10px);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     border-bottom-style: dotted;\n///     border-top-style: dotted;\n///     margin-bottom: 10px;\n///     margin-left: 0;\n///     margin-right: 0;\n///   }\n///\n/// @require {function} contains-falsy\n///\n/// @return {List}\n\n@function collapse-directionals($vals) {\n  $output: null;\n\n  $a: nth($vals, 1);\n  $b: if(length($vals) < 2, $a, nth($vals, 2));\n  $c: if(length($vals) < 3, $a, nth($vals, 3));\n  $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));\n\n  @if $a == 0 { $a: 0; }\n  @if $b == 0 { $b: 0; }\n  @if $c == 0 { $c: 0; }\n  @if $d == 0 { $d: 0; }\n\n  @if $a == $b and $a == $c and $a == $d { $output: $a;          }\n  @else if $a == $c and $b == $d         { $output: $a $b;       }\n  @else if $b == $d                      { $output: $a $b $c;    }\n  @else                                  { $output: $a $b $c $d; }\n\n  @return $output;\n}\n\n/// Output directional properties, for instance `margin`.\n///\n/// @access private\n///\n/// @param {String} $pre\n///   Prefix to use\n/// @param {String} $suf\n///   Suffix to use\n/// @param {List} $vals\n///   List of values\n///\n/// @require {function} collapse-directionals\n/// @require {function} contains-falsy\n\n@mixin directional-property($pre, $suf, $vals) {\n  // Property Names\n  $top:    $pre + \"-top\"    + if($suf, \"-#{$suf}\", \"\");\n  $bottom: $pre + \"-bottom\" + if($suf, \"-#{$suf}\", \"\");\n  $left:   $pre + \"-left\"   + if($suf, \"-#{$suf}\", \"\");\n  $right:  $pre + \"-right\"  + if($suf, \"-#{$suf}\", \"\");\n  $all:    $pre +             if($suf, \"-#{$suf}\", \"\");\n\n  $vals: collapse-directionals($vals);\n\n  @if contains-falsy($vals) {\n    @if nth($vals, 1) { #{$top}: nth($vals, 1); }\n\n    @if length($vals) == 1 {\n      @if nth($vals, 1) { #{$right}: nth($vals, 1); }\n    } @else {\n      @if nth($vals, 2) { #{$right}: nth($vals, 2); }\n    }\n\n    @if length($vals) == 2 {\n      @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }\n      @if nth($vals, 2) { #{$left}:   nth($vals, 2); }\n    } @else if length($vals) == 3 {\n      @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }\n      @if nth($vals, 2) { #{$left}:   nth($vals, 2); }\n    } @else if length($vals) == 4 {\n      @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }\n      @if nth($vals, 4) { #{$left}:   nth($vals, 4); }\n    }\n  } @else {\n    #{$all}: $vals;\n  }\n}\n","// Used for creating the source string for fonts using @font-face\n// Reference: http://goo.gl/Ru1bKP\n\n@function font-url-prefixer($asset-pipeline) {\n  @if $asset-pipeline == true {\n    @return font-url;\n  } @else {\n    @return url;\n  }\n}\n\n@function font-source-declaration(\n  $font-family,\n  $file-path,\n  $asset-pipeline,\n  $file-formats,\n  $font-url) {\n\n  $src: ();\n\n  $formats-map: (\n    eot:   \"#{$file-path}.eot?#iefix\" format(\"embedded-opentype\"),\n    woff2: \"#{$file-path}.woff2\" format(\"woff2\"),\n    woff:  \"#{$file-path}.woff\" format(\"woff\"),\n    ttf:   \"#{$file-path}.ttf\" format(\"truetype\"),\n    svg:   \"#{$file-path}.svg##{$font-family}\" format(\"svg\")\n  );\n\n  @each $key, $values in $formats-map {\n    @if contains($file-formats, $key) {\n      $file-path: nth($values, 1);\n      $font-format: nth($values, 2);\n\n      @if $asset-pipeline == true {\n        $src: append($src, font-url($file-path) $font-format, comma);\n      } @else {\n        $src: append($src, url($file-path) $font-format, comma);\n      }\n    }\n  }\n\n  @return $src;\n}\n","@function _gradient-positions-parser($gradient-type, $gradient-positions) {\n  @if $gradient-positions\n  and ($gradient-type == linear)\n  and (type-of($gradient-positions) != color) {\n    $gradient-positions: _linear-positions-parser($gradient-positions);\n  }\n  @else if $gradient-positions\n  and ($gradient-type == radial)\n  and (type-of($gradient-positions) != color) {\n    $gradient-positions: _radial-positions-parser($gradient-positions);\n  }\n  @return $gradient-positions;\n}\n","// Private function for linear-gradient-parser\n@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {\n  $offset: null;\n  $unit-short:  str-slice($first-val, str-length($first-val) - 2, str-length($first-val));\n  $unit-long:   str-slice($first-val, str-length($first-val) - 3, str-length($first-val));\n\n  @if ($unit-long == \"grad\") or\n      ($unit-long == \"turn\") {\n    $offset: if($unit-long == \"grad\", -100grad * 3, -0.75turn);\n  }\n\n  @else if ($unit-short == \"deg\") or\n           ($unit-short == \"rad\") {\n    $offset: if($unit-short == \"deg\", -90 * 3, 1.6rad);\n  }\n\n  @if $offset {\n    $num: _str-to-num($first-val);\n\n    @return (\n      webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,\n      spec-image: $image\n    );\n  }\n}\n","@function _linear-gradient-parser($image) {\n  $image: unquote($image);\n  $gradients: ();\n  $start: str-index($image, \"(\");\n  $end: str-index($image, \",\");\n  $first-val: str-slice($image, $start + 1, $end - 1);\n\n  $prefix: str-slice($image, 1, $start);\n  $suffix: str-slice($image, $end, str-length($image));\n\n  $has-multiple-vals: str-index($first-val, \" \");\n  $has-single-position: unquote(_position-flipper($first-val) + \"\");\n  $has-angle: is-number(str-slice($first-val, 1, 1));\n\n  @if $has-multiple-vals {\n    $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);\n  }\n\n  @else if $has-single-position != \"\" {\n    $pos: unquote($has-single-position + \"\");\n\n    $gradients: (\n      webkit-image: -webkit- + $image,\n      spec-image: $prefix + \"to \" + $pos + $suffix\n    );\n  }\n\n  @else if $has-angle {\n    // Rotate degree for webkit\n    $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);\n  }\n\n  @else {\n    $gradients: (\n      webkit-image: -webkit- + $image,\n      spec-image: $image\n    );\n  }\n\n  @return $gradients;\n}\n","@function _linear-positions-parser($pos) {\n  $type: type-of(nth($pos, 1));\n  $spec: null;\n  $degree: null;\n  $side: null;\n  $corner: null;\n  $length: length($pos);\n  // Parse Side and corner positions\n  @if ($length > 1) {\n    @if nth($pos, 1) == \"to\" { // Newer syntax\n      $side: nth($pos, 2);\n\n      @if $length == 2 { // eg. to top\n        // Swap for backwards compatibility\n        $degree: _position-flipper(nth($pos, 2));\n      }\n      @else if $length == 3 { // eg. to top left\n        $corner: nth($pos, 3);\n      }\n    }\n    @else if $length == 2 { // Older syntax (\"top left\")\n      $side: _position-flipper(nth($pos, 1));\n      $corner: _position-flipper(nth($pos, 2));\n    }\n\n    @if (\"#{$side} #{$corner}\" == \"left top\") or (\"#{$side} #{$corner}\" == \"top left\") {\n      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});\n    }\n    @else if (\"#{$side} #{$corner}\" == \"right top\") or (\"#{$side} #{$corner}\" == \"top right\") {\n      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});\n    }\n    @else if (\"#{$side} #{$corner}\" == \"right bottom\") or (\"#{$side} #{$corner}\" == \"bottom right\") {\n      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});\n    }\n    @else if (\"#{$side} #{$corner}\" == \"left bottom\") or (\"#{$side} #{$corner}\" == \"bottom left\") {\n      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});\n    }\n    $spec: to $side $corner;\n  }\n  @else if $length == 1 {\n    // Swap for backwards compatibility\n    @if $type == string {\n      $degree: $pos;\n      $spec: to _position-flipper($pos);\n    }\n    @else {\n      $degree: -270 - $pos; //rotate the gradient opposite from spec\n      $spec: $pos;\n    }\n  }\n  $degree: unquote($degree + \",\");\n  $spec:   unquote($spec + \",\");\n  @return $degree $spec;\n}\n\n@function _position-flipper($pos) {\n  @return if($pos == left, right, null)\n         if($pos == right, left, null)\n         if($pos == top, bottom, null)\n         if($pos == bottom, top, null);\n}\n","// Private function for linear-gradient-parser\n@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {\n  $val-1: str-slice($first-val, 1, $has-multiple-vals - 1);\n  $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));\n  $val-3: null;\n  $has-val-3: str-index($val-2, \" \");\n\n  @if $has-val-3 {\n    $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));\n    $val-2: str-slice($val-2, 1, $has-val-3 - 1);\n  }\n\n  $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);\n  $pos: unquote($pos + \"\");\n\n  // Use old spec for webkit\n  @if $val-1 == \"to\" {\n    @return (\n      webkit-image: -webkit- + $prefix + $pos + $suffix,\n      spec-image: $image\n    );\n  }\n\n  // Bring the code up to spec\n  @else {\n    @return (\n      webkit-image: -webkit- + $image,\n      spec-image: $prefix + \"to \" + $pos + $suffix\n    );\n  }\n}\n","@function _radial-arg-parser($g1, $g2, $pos, $shape-size) {\n  @each $value in $g1, $g2 {\n    $first-val: nth($value, 1);\n    $pos-type:  type-of($first-val);\n    $spec-at-index: null;\n\n    // Determine if spec was passed to mixin\n    @if type-of($value) == list {\n      $spec-at-index: if(index($value, at), index($value, at), false);\n    }\n    @if $spec-at-index {\n      @if $spec-at-index > 1 {\n        @for $i from 1 through ($spec-at-index - 1) {\n          $shape-size: $shape-size nth($value, $i);\n        }\n        @for $i from ($spec-at-index + 1) through length($value) {\n          $pos: $pos nth($value, $i);\n        }\n      }\n      @else if $spec-at-index == 1 {\n        @for $i from ($spec-at-index + 1) through length($value) {\n          $pos: $pos nth($value, $i);\n        }\n      }\n      $g1: null;\n    }\n\n    // If not spec calculate correct values\n    @else {\n      @if ($pos-type != color) or ($first-val != \"transparent\") {\n        @if ($pos-type == number)\n        or ($first-val == \"center\")\n        or ($first-val == \"top\")\n        or ($first-val == \"right\")\n        or ($first-val == \"bottom\")\n        or ($first-val == \"left\") {\n\n          $pos: $value;\n\n          @if $pos == $g1 {\n            $g1: null;\n          }\n        }\n\n        @else if\n           ($first-val == \"ellipse\")\n        or ($first-val == \"circle\")\n        or ($first-val == \"closest-side\")\n        or ($first-val == \"closest-corner\")\n        or ($first-val == \"farthest-side\")\n        or ($first-val == \"farthest-corner\")\n        or ($first-val == \"contain\")\n        or ($first-val == \"cover\") {\n\n          $shape-size: $value;\n\n          @if $value == $g1 {\n            $g1: null;\n          }\n\n          @else if $value == $g2 {\n            $g2: null;\n          }\n        }\n      }\n    }\n  }\n  @return $g1, $g2, $pos, $shape-size;\n}\n","@function _radial-positions-parser($gradient-pos) {\n  $shape-size: nth($gradient-pos, 1);\n  $pos:        nth($gradient-pos, 2);\n  $shape-size-spec: _shape-size-stripper($shape-size);\n\n  $pre-spec: unquote(if($pos, \"#{$pos}, \", null))\n             unquote(if($shape-size, \"#{$shape-size},\", null));\n  $pos-spec: if($pos, \"at #{$pos}\", null);\n\n  $spec: \"#{$shape-size-spec} #{$pos-spec}\";\n\n  // Add comma\n  @if ($spec != \"  \") {\n    $spec: \"#{$spec},\";\n  }\n\n  @return $pre-spec $spec;\n}\n","@function _radial-gradient-parser($image) {\n  $image: unquote($image);\n  $gradients: ();\n  $start: str-index($image, \"(\");\n  $end: str-index($image, \",\");\n  $first-val: str-slice($image, $start + 1, $end - 1);\n\n  $prefix: str-slice($image, 1, $start);\n  $suffix: str-slice($image, $end, str-length($image));\n\n  $is-spec-syntax: str-index($first-val, \"at\");\n\n  @if $is-spec-syntax and $is-spec-syntax > 1 {\n    $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);\n    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));\n    $pos: append($pos, $keyword, comma);\n\n    $gradients: (\n      webkit-image: -webkit- + $prefix + $pos + $suffix,\n      spec-image: $image\n    );\n  }\n\n  @else if $is-spec-syntax == 1 {\n    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));\n\n    $gradients: (\n      webkit-image: -webkit- + $prefix + $pos + $suffix,\n      spec-image: $image\n    );\n  }\n\n  @else if str-index($image, \"cover\") or str-index($image, \"contain\") {\n    @warn \"Radial-gradient needs to be updated to conform to latest spec.\";\n\n    $gradients: (\n      webkit-image: null,\n      spec-image: $image\n    );\n  }\n\n  @else {\n    $gradients: (\n      webkit-image: -webkit- + $image,\n      spec-image: $image\n    );\n  }\n\n  @return $gradients;\n}\n","// User for linear and radial gradients within background-image or border-image properties\n\n@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {\n  $pre-spec: null;\n  $spec: null;\n  $vendor-gradients: null;\n  @if $gradient-type == linear {\n    @if $gradient-positions {\n      $pre-spec: nth($gradient-positions, 1);\n      $spec:     nth($gradient-positions, 2);\n    }\n  }\n  @else if $gradient-type == radial {\n    $pre-spec: nth($gradient-positions, 1);\n    $spec:     nth($gradient-positions, 2);\n  }\n\n  @if $vendor {\n    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);\n  }\n  @else if $vendor == false {\n    $vendor-gradients: \"#{$gradient-type}-gradient(#{$spec} #{$gradients})\";\n    $vendor-gradients: unquote($vendor-gradients);\n  }\n  @return $vendor-gradients;\n}\n","@function _shape-size-stripper($shape-size) {\n  $shape-size-spec: null;\n  @each $value in $shape-size {\n    @if ($value == \"cover\") or ($value == \"contain\") {\n      $value: null;\n    }\n    $shape-size-spec: \"#{$shape-size-spec} #{$value}\";\n  }\n  @return $shape-size-spec;\n}\n","//************************************************************************//\n// Helper function for linear/radial-gradient-parsers.\n// Source: http://sassmeister.com/gist/9647408\n//************************************************************************//\n@function _str-to-num($string) {\n  // Matrices\n  $strings: \"0\" \"1\" \"2\" \"3\" \"4\" \"5\" \"6\" \"7\" \"8\" \"9\";\n  $numbers:  0   1   2   3   4   5   6   7   8   9;\n\n  // Result\n  $result: 0;\n  $divider: 0;\n  $minus: false;\n\n  // Looping through all characters\n  @for $i from 1 through str-length($string) {\n    $character: str-slice($string, $i, $i);\n    $index: index($strings, $character);\n\n    @if $character == \"-\" {\n      $minus: true;\n    }\n\n    @else if $character == \".\" {\n      $divider: 1;\n    }\n\n    @else {\n      @if not $index {\n        $result: if($minus, $result * -1, $result);\n        @return _convert-units($result, str-slice($string, $i));\n      }\n\n      $number: nth($numbers, $index);\n\n      @if $divider == 0 {\n        $result: $result * 10;\n      }\n\n      @else {\n        // Move the decimal dot to the left\n        $divider: $divider * 10;\n        $number: $number / $divider;\n      }\n\n      $result: $result + $number;\n    }\n  }\n  @return if($minus, $result * -1, $result);\n}\n","// http://www.w3.org/TR/css3-animations/#the-animation-name-property-\n// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.\n\n@mixin animation($animations...) {\n  @include prefixer(animation, $animations, webkit moz spec);\n}\n\n@mixin animation-name($names...) {\n  @include prefixer(animation-name, $names, webkit moz spec);\n}\n\n@mixin animation-duration($times...) {\n  @include prefixer(animation-duration, $times, webkit moz spec);\n}\n\n@mixin animation-timing-function($motions...) {\n  // ease | linear | ease-in | ease-out | ease-in-out\n  @include prefixer(animation-timing-function, $motions, webkit moz spec);\n}\n\n@mixin animation-iteration-count($values...) {\n  // infinite | <number>\n  @include prefixer(animation-iteration-count, $values, webkit moz spec);\n}\n\n@mixin animation-direction($directions...) {\n  // normal | alternate\n  @include prefixer(animation-direction, $directions, webkit moz spec);\n}\n\n@mixin animation-play-state($states...) {\n  // running | paused\n  @include prefixer(animation-play-state, $states, webkit moz spec);\n}\n\n@mixin animation-delay($times...) {\n  @include prefixer(animation-delay, $times, webkit moz spec);\n}\n\n@mixin animation-fill-mode($modes...) {\n  // none | forwards | backwards | both\n  @include prefixer(animation-fill-mode, $modes, webkit moz spec);\n}\n","@mixin appearance($value) {\n  @include prefixer(appearance, $value, webkit moz ms o spec);\n}\n","@mixin backface-visibility($visibility) {\n  @include prefixer(backface-visibility, $visibility, webkit spec);\n}\n","//************************************************************************//\n// Background property for adding multiple backgrounds using shorthand\n// notation.\n//************************************************************************//\n\n@mixin background($backgrounds...) {\n  $webkit-backgrounds: ();\n  $spec-backgrounds: ();\n\n  @each $background in $backgrounds {\n    $webkit-background: ();\n    $spec-background: ();\n    $background-type: type-of($background);\n\n    @if $background-type == string or $background-type == list {\n      $background-str: if($background-type == list, nth($background, 1), $background);\n\n      $url-str:       str-slice($background-str, 1, 3);\n      $gradient-type: str-slice($background-str, 1, 6);\n\n      @if $url-str == \"url\" {\n        $webkit-background: $background;\n        $spec-background:   $background;\n      }\n\n      @else if $gradient-type == \"linear\" {\n        $gradients: _linear-gradient-parser(\"#{$background}\");\n        $webkit-background: map-get($gradients, webkit-image);\n        $spec-background:   map-get($gradients, spec-image);\n      }\n\n      @else if $gradient-type == \"radial\" {\n        $gradients: _radial-gradient-parser(\"#{$background}\");\n        $webkit-background: map-get($gradients, webkit-image);\n        $spec-background:   map-get($gradients, spec-image);\n      }\n\n      @else {\n        $webkit-background: $background;\n        $spec-background:   $background;\n      }\n    }\n\n    @else {\n      $webkit-background: $background;\n      $spec-background:   $background;\n    }\n\n    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);\n    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);\n  }\n\n  background: $webkit-backgrounds;\n  background: $spec-backgrounds;\n}\n","//************************************************************************//\n// Background-image property for adding multiple background images with\n// gradients, or for stringing multiple gradients together.\n//************************************************************************//\n\n@mixin background-image($images...) {\n  $webkit-images: ();\n  $spec-images: ();\n\n  @each $image in $images {\n    $webkit-image: ();\n    $spec-image: ();\n\n    @if (type-of($image) == string) {\n      $url-str:       str-slice($image, 1, 3);\n      $gradient-type: str-slice($image, 1, 6);\n\n      @if $url-str == \"url\" {\n        $webkit-image: $image;\n        $spec-image:   $image;\n      }\n\n      @else if $gradient-type == \"linear\" {\n        $gradients: _linear-gradient-parser($image);\n        $webkit-image:  map-get($gradients, webkit-image);\n        $spec-image:    map-get($gradients, spec-image);\n      }\n\n      @else if $gradient-type == \"radial\" {\n        $gradients: _radial-gradient-parser($image);\n        $webkit-image: map-get($gradients, webkit-image);\n        $spec-image:   map-get($gradients, spec-image);\n      }\n    }\n\n    $webkit-images: append($webkit-images, $webkit-image, comma);\n    $spec-images:   append($spec-images,   $spec-image,   comma);\n  }\n\n  background-image: $webkit-images;\n  background-image: $spec-images;\n}\n","@mixin border-image($borders...) {\n  $webkit-borders: ();\n  $spec-borders: ();\n\n  @each $border in $borders {\n    $webkit-border: ();\n    $spec-border: ();\n    $border-type: type-of($border);\n\n    @if $border-type == string or list {\n      $border-str: if($border-type == list, nth($border, 1), $border);\n\n      $url-str:       str-slice($border-str, 1, 3);\n      $gradient-type: str-slice($border-str, 1, 6);\n\n      @if $url-str == \"url\" {\n        $webkit-border: $border;\n        $spec-border:   $border;\n      }\n\n      @else if $gradient-type == \"linear\" {\n        $gradients: _linear-gradient-parser(\"#{$border}\");\n        $webkit-border: map-get($gradients, webkit-image);\n        $spec-border:   map-get($gradients, spec-image);\n      }\n\n      @else if $gradient-type == \"radial\" {\n        $gradients: _radial-gradient-parser(\"#{$border}\");\n        $webkit-border: map-get($gradients, webkit-image);\n        $spec-border:   map-get($gradients, spec-image);\n      }\n\n      @else {\n        $webkit-border: $border;\n        $spec-border:   $border;\n      }\n    }\n\n    @else {\n      $webkit-border: $border;\n      $spec-border:   $border;\n    }\n\n    $webkit-borders: append($webkit-borders, $webkit-border, comma);\n    $spec-borders:   append($spec-borders,   $spec-border,   comma);\n  }\n\n  -webkit-border-image: $webkit-borders;\n          border-image: $spec-borders;\n          border-style: solid;\n}\n\n//Examples:\n// @include border-image(url(\"image.png\"));\n// @include border-image(url(\"image.png\") 20 stretch);\n// @include border-image(linear-gradient(45deg, orange, yellow));\n// @include border-image(linear-gradient(45deg, orange, yellow) stretch);\n// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);\n// @include border-image(radial-gradient(top, cover, orange, yellow, orange));\n","@mixin calc($property, $value) {\n  #{$property}: -webkit-calc(#{$value});\n  #{$property}: calc(#{$value});\n}\n","@mixin columns($arg: auto) {\n  // <column-count> || <column-width>\n  @include prefixer(columns, $arg, webkit moz spec);\n}\n\n@mixin column-count($int: auto) {\n  // auto || integer\n  @include prefixer(column-count, $int, webkit moz spec);\n}\n\n@mixin column-gap($length: normal) {\n  // normal || length\n  @include prefixer(column-gap, $length, webkit moz spec);\n}\n\n@mixin column-fill($arg: auto) {\n  // auto || length\n  @include prefixer(column-fill, $arg, webkit moz spec);\n}\n\n@mixin column-rule($arg) {\n  // <border-width> || <border-style> || <color>\n  @include prefixer(column-rule, $arg, webkit moz spec);\n}\n\n@mixin column-rule-color($color) {\n  @include prefixer(column-rule-color, $color, webkit moz spec);\n}\n\n@mixin column-rule-style($style: none) {\n  // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid\n  @include prefixer(column-rule-style, $style, webkit moz spec);\n}\n\n@mixin column-rule-width ($width: none) {\n  @include prefixer(column-rule-width, $width, webkit moz spec);\n}\n\n@mixin column-span($arg: none) {\n  // none || all\n  @include prefixer(column-span, $arg, webkit moz spec);\n}\n\n@mixin column-width($length: auto) {\n  // auto || length\n  @include prefixer(column-width, $length, webkit moz spec);\n}\n","@mixin filter($function: none) {\n  // <filter-function> [<filter-function]* | none\n  @include prefixer(filter, $function, webkit spec);\n}\n","// CSS3 Flexible Box Model and property defaults\n\n// Custom shorthand notation for flexbox\n@mixin box($orient: inline-axis, $pack: start, $align: stretch) {\n  @include display-box;\n  @include box-orient($orient);\n  @include box-pack($pack);\n  @include box-align($align);\n}\n\n@mixin display-box {\n  display: -webkit-box;\n  display: -moz-box;\n  display: -ms-flexbox; // IE 10\n  display: box;\n}\n\n@mixin box-orient($orient: inline-axis) {\n// horizontal|vertical|inline-axis|block-axis|inherit\n  @include prefixer(box-orient, $orient, webkit moz spec);\n}\n\n@mixin box-pack($pack: start) {\n// start|end|center|justify\n  @include prefixer(box-pack, $pack, webkit moz spec);\n  -ms-flex-pack: $pack; // IE 10\n}\n\n@mixin box-align($align: stretch) {\n// start|end|center|baseline|stretch\n  @include prefixer(box-align, $align, webkit moz spec);\n  -ms-flex-align: $align; // IE 10\n}\n\n@mixin box-direction($direction: normal) {\n// normal|reverse|inherit\n  @include prefixer(box-direction, $direction, webkit moz spec);\n  -ms-flex-direction: $direction; // IE 10\n}\n\n@mixin box-lines($lines: single) {\n// single|multiple\n  @include prefixer(box-lines, $lines, webkit moz spec);\n}\n\n@mixin box-ordinal-group($int: 1) {\n  @include prefixer(box-ordinal-group, $int, webkit moz spec);\n  -ms-flex-order: $int; // IE 10\n}\n\n@mixin box-flex($value: 0) {\n  @include prefixer(box-flex, $value, webkit moz spec);\n  -ms-flex: $value; // IE 10\n}\n\n@mixin box-flex-group($int: 1) {\n  @include prefixer(box-flex-group, $int, webkit moz spec);\n}\n\n// CSS3 Flexible Box Model and property defaults\n// Unified attributes for 2009, 2011, and 2012 flavours.\n\n// 2009 - display (box | inline-box)\n// 2011 - display (flexbox | inline-flexbox)\n// 2012 - display (flex | inline-flex)\n@mixin display($value) {\n// flex | inline-flex\n  @if $value == \"flex\" {\n    // 2009\n    display: -webkit-box;\n    display: -moz-box;\n    display: box;\n\n    // 2012\n    display: -webkit-flex;\n    display: -moz-flex;\n    display: -ms-flexbox; // 2011 (IE 10)\n    display: flex;\n  } @else if $value == \"inline-flex\" {\n    display: -webkit-inline-box;\n    display: -moz-inline-box;\n    display: inline-box;\n\n    display: -webkit-inline-flex;\n    display: -moz-inline-flex;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n  } @else {\n    display: $value;\n  }\n}\