@mixin breakpoint($point) {
    @if $point == A {
        @media (min-width: 481px) { @content; }
    }
    @if $point == B {
        @media (min-width: 768px) { @content; }
    }
    @else if $point == C {
        @media (min-width: 980px) { @content; }
    }
    @else if $point == D {
        @media (min-width: 1200px)  { @content; }
    }
    @else if $point == lessThanB {
        @media (max-width: 767px)  { @content; }
    }
    @else if $point == lessThanA {
        @media (max-width: 480px)  { @content; }
    }
    @else if $point == AtoB {
        @media (min-width: 481px) and (max-width: 767px) { @content; }
    }
}

@mixin box-sizing($bs) {
    box-sizing: $bs;
    -moz-box-sizing: $bs;
    -webkit-box-sizing: $bs;
}

@mixin border-radius($val) {
    border-radius: $val;
}

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

@mixin badge {
    line-height: 14px;
    font-size: 11.844px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    display: inline-block;
}

@mixin well {
    min-height: 20px;
    padding: 9px;
    margin-bottom: 12px;
    background-color: $mat;
    border: 1px solid darken($grey, 5%);
    @include border-radius(3px);
    @include box-shadow(0 0 4px 2px $grey);

    blockquote {
        border-color: #ddd;
        border-color: rgba(0,0,0,.15);
    }
}

@mixin opacity($opacity) {
    opacity: $opacity / 100;
    filter: alpha(opacity=#{$opacity})
}

@mixin mark($color) {
    background-color: $mat;
    border-left: 5px solid $color;
}
@mixin mark-big($color) {
    background-color: $mat;
    border-top: 5px solid $color;
}

@mixin grey-link {
    color: $dark-grey;
    &:hover {
        text-decoration: none;
        color: $text-color;
    }
}

@mixin clearfix {
    &:before, &:after {
        display: table;
        content: "";
        clear: both;
    }
}

@mixin flex-row-margins($value) {
    margin-left: -$value;
    margin-right: -$value;
    > * {
        margin-left: $value;
        margin-right: $value;
    }
}

@mixin flex-column-margins($value) {
    margin-top: -$value;
    margin-bottom: -$value;
    > * {
        margin-top: $value;
        margin-bottom: $value;
    }
}

@mixin bg-header {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 200;
    margin-bottom: 20px;
    color: $dark-grey;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}
@mixin animation-iteration-count($count...) {
  -o-animation-iteration-count: $count;
  -moz-animation-iteration-count: $count;
  -webkit-animation-iteration-count: $count;
  animation-iteration-count: $count;
}
// etc - see http://codepen.io/sawmac/pen/rjHFd

// COPIED FROM BOOTSTRAP

// User select
// For selecting text on the page
@mixin user-select($select) {
    -webkit-user-select: $select;
    -moz-user-select: $select;
    -ms-user-select: $select;
    -o-user-select: $select;
    user-select: $select;
}

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

// copied from bootstrap-sass
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+
  background-image:  -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
  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
}
