@import 'bourbon';

//
// Mixins
//

.animation {
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
  @include animation(scale 1.0s ease-in, slide 2.0s ease);
}

.appearance {
  @include appearance(none);
}

.backface-visibility {
  @include backface-visibility(visible);
}

.background {
  @include background(linear-gradient(red, green) left repeat);
  @include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange) left repeat);
  @include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);
}

.background-image {
  @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
  @include background-image(
    linear-gradient(hsla(0, 100%, 100%, 0.25) 0%,
    hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
    linear-gradient(#4e7ba3, darken(#4e7ba4, 10%))
  );
}

// DEPRECATED
// .background-size {
//   @include background-size(50% 100%);
//   @include background-size(50% 100%, 75% 100%);
// }

.border-image {
  @include border-image(url(/images/border.png) 27 repeat);
}

// DEPRECATED
// .box-shadow {
//   @include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));
// }

.box-sizing {
  @include box-sizing(border-box);
}

.calc {
  @include calc(width, '100% - 80px');
}

.columns {
  @include columns(12 8em);
  @include column-rule(1px solid green);
}

.filter {
  @include filter(grayscale(blue));
}

.flex-box {
  @include display-box;
  @include box-align(start);
  @include box-orient(horizontal);
  @include box-pack(start);

  > div {
    @include box-flex(2);
  }
}

.flex-box-shorthand {
  @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
  @include box(vertical, start, stretch);
}

.font-face {
  @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
  @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
  @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);
}

.hidpi {
  @include hidpi(1.5) {
    width: 260px;
  }
}

.image-rendering {
  @include image-rendering(optimizeSpeed);
}

@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  }
  to {
    @include transform(scale(1));
  }
}

.linear-gradient {
  @include linear-gradient(#1e5799, #2989d8);
  @include linear-gradient(to top, #8fdce5, #3dc3d1);
  @include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
  @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
}

.perspective {
  @include perspective(300px);
  @include perspective-origin(30% 30%);
}

.placeholder input {
  @include placeholder {
    color: red;
  }
}

.radial-gradient {
  @include radial-gradient(#1e5799, #3dc3d1);
  @include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
  @include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);
}

.transform {
  @include transform(translateY(50px));
  @include transform-origin(center top);
  @include transform-style(preserve-3d);
}

.transition {
  @include transition(all 2.0s ease-in-out);
  @include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
}

.user-select {
  @include user-select(none);
}

//
// Functions
//

.compact {
  $text: 'text';
  $true: true;
  $false: false;
  $compact: compact($text, $true, $false);
}

$fg-column: 60px;
$fg-gutter: 25px;
$fg-max-columns: 12;
.flex-grid {
  width: flex-grid(4);
  margin-left: flex-gutter();

  p {
    width: flex-grid(2, 4);
    float: left;
    margin: flex-gutter(4);
  }

  blockquote {
    float: left;
    width: flex-grid(2, 4);
  }
}

.golden-ratio {
  font-size: golden-ratio(14px,  1);
  font-size: golden-ratio(14px, -1);
}

$gw-column: 100px;
$gw-gutter: 40px;
.grid-width {
  width: grid-width(4);
  margin-left: $gw-gutter;
}

.linear-gradient-function {
  @include background-image(linear-gradient(white 0, yellow 50%, transparent 50%));
}

.modular-scale {
 font-size:        modular-scale(14px,   1, 1.618);
 font-size:        modular-scale(14px,  -1, 1.618);
 font-size: floor( modular-scale(14px, 1, 1.618) );
 font-size:  ceil( modular-scale(14px, 1, 1.618) );
}

.radial-gradient-function {
  @include background-image( radial-gradient(#1e5799, #3dc3d1) );
  @include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
  @include background-image( radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef) );
}

.tint-shade {
  background: tint(red, 40%);
  background: shade(blue, 60%);
}

//
// Add-ons
//

.border-color {
  @include border-color(red green null blue);
}

.border-style {
  @include border-style(dashed null solid);
}

.border-width {
  @include border-width(1em 20px null 100%);
}

.buttons button {
  @include button;
  @include button(pill);
  @include button(shiny, #ff0000);
}

.clearfix {
  @include clearfix;
}

.directional-property {
  @include directional-property(border, width, 10px null 4px 3px);
}

.ellipsis {
  @include ellipsis(50%);
}

.em {
  font-size: em(12);
  font-size: em(12, 24);
}

.font-family {
  font-family: $helvetica;
  font-family: $georgia;
  font-family: $lucida-grande;
  font-family: $monospace;
  font-family: $verdana;
}

.hide-text {
  @include hide-text;
  background-image: url(logo.png);
}

.html5-input-types {
  #{$all-text-inputs} {
    border: 1px solid green;
  }

  #{$all-text-inputs-hover} {
    background: yellow;
  }

  #{$all-text-inputs-focus} {
    background: white;
  }
}

.inline-block {
  @include inline-block;
}

.font-size {
  font-size: em(12);
  font-size: em(12, 24);
}

.margin {
  @include margin(null 10px 3em 20vh);
}

.padding {
  @include padding(20vh null 10px 3em);
}

.position {
  @include position(relative);
  @include position(relative, 0px 0 0 100px);
  @include position(relative, 0 0 0 0);
  @include position(relative, 0 3em 0 3em);
  @include position(relative, null null null null);
}

.prefixer {
  @include prefixer(box-sizing, border-box, webkit moz spec);
}

.retina-image {
  @include retina-image(home-icon, 32px 20px)
}

.size {
  @include size(25);
  @include size(30px 70px);
  @include size(auto 80px);
}

.timing-functions {
  @include transition(all 5s $ease-in-circ);
}

.triangle {
  @include triangle(12px, gray, down);
  @include triangle(12px 6px, gray lavender, up-left);
}

.word-wrap {
  @include word-wrap;
  @include word-wrap(normal);
}