/* MIXINS */

@mixin min-width($size) {
  @media only screen and (min-width: $size) { @content; }
}

@mixin respond-to($media) {
  @if $media == phones {
    @media only screen and (max-width: $screen-xs-max) { @content; }
  }
  @else if $media == tablets-small {
    @media only screen and (max-width: $screen-sm-max) { @content; }
  }
  @else if $media == tablets-large {
    @media only screen and (max-width: $screen-md-max) { @content; }
  }
  @else if $media == desktops {
    @media only screen and (min-width: $screen-lg-min) { @content; }
  }
}

// Responsive breakpoints
@mixin responsive-for($media) {
  @if $media == phones-portrait {
    @media only screen and (max-width: 479px) { @content; }
  }
  @if $media == phones-landscape {
    @media only screen and (max-width: 767px) { @content; }
  }
  @else if $media == tablets-portrait {
    @media only screen and (max-width: 991px) { @content; }
  }
  @else if $media == tablets-landscape {
    @media only screen and (max-width: 1024px) { @content; }
  }
  @else if $media == desktops {
    @media only screen and (min-width: 1025px) { @content; }
  }
}

// Vertical gradient, from top to bottom
@mixin gradient-vertical($start-color: #555, $end-color: #333, $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: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
  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
}

// Buttons
@mixin custom-btn($button-class, $border-radius, $background, $background-hover, $color, $color-hover, $border, $border-hover) {
    .custom-btn.#{$button-class} {
        @include transition(150ms);
        display: inline-block;
        background: #{$background};
        color: #{$color};
        border-style: solid;
        border-width: 0 0 4px 0;
        border-color: #{$border};
        border-radius: #{$border-radius};
        text-decoration: none;
        box-shadow: none;
    }
    .custom-btn.#{$button-class}:hover {
        background: #{$background-hover};
        color: #{$color-hover};
        border-color: #{$border-hover};
        text-decoration: none;
        box-shadow: none;
    }
}

@mixin custom-btn-sizes($size-class, $font-size, $font-size-tablets, $font-size-phones, $line-height, $line-height-tablets, $line-height-phones, $padding, $padding-tablets, $padding-phones) {
    .custom-btn.#{$size-class} {
        font-size: $font-size;
        line-height: $line-height;
        padding: $padding;
        font-weight: 700;
        @include respond-to(tablets-small) {
            font-size: $font-size-tablets;
            line-height: $line-height-tablets;
            padding: $padding-tablets;
        }
        @include respond-to(phones) {
            font-size: $font-size-phones;
            line-height: $line-height-phones;
            padding: $padding-phones;
        }
    }
}

// Labels
@mixin custom-label($label-class, $background, $background-hover) {
    .custom-label.#{$label-class} {
        display: inline;
        border-radius: 3px;
        padding: 3px 10px;
        color: #ffffff;
        font-size: 14px;
        text-decoration: none;
        background: $background;
        &:hover {
            text-decoration: none;
            background: $background-hover;
        }
        &.super {
            vertical-align: super;
        }
    }
}

// Placeholder text
@mixin custom-placeholder($color, $font-size, $line-height) {
    &:-moz-placeholder {
        color: $color;
        font-size: $font-size;
        line-height: $line-height;
        opacity: 1;
}
    &::-moz-placeholder {
        color: $color;
        font-size: $font-size;
        line-height: $line-height;
        opacity: 1;
    }
    &:-ms-input-placeholder {
        color: $color;
        font-size: $font-size;
        line-height: $line-height;
        opacity: 1;
    }
    &::-webkit-input-placeholder {
        color: $color;
        font-size: $font-size;
        line-height: $line-height;
        opacity: 1;
    }
}

// Tech Logos
@mixin tech-logos($logo-class, $background-position, $background-position-mobile) {
    &.overlay-#{$logo-class} {
        &:after {
            background-position: right $background-position;
            @include respond-to(tablets-small) {
                background-position: right $background-position-mobile;
            }
        }
    }
}

@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

// Mixin for the Radial Gradient
@mixin gradient-radial($start-point-horizontal, $start-point-vertical, $start-colour, $start-position, $end-colour, $end-position) {
  background: -moz-radial-gradient($start-point-horizontal $start-point-vertical, ellipse cover, $start-colour $start-position, $end-colour $end-position);
  background: -webkit-gradient(radial, $start-point-horizontal $start-point-vertical, 0px, $start-point-horizontal $start-point-vertical, 100%, Colour-stop($start-position,$start-colour), Colour-stop($end-position,$end-colour));
  background: -webkit-radial-gradient($start-point-horizontal $start-point-vertical, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: -o-radial-gradient($start-point-horizontal $start-point-vertical, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: -ms-radial-gradient($start-point-horizontal $start-point-vertical, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: radial-gradient(ellipse at $start-point-horizontal $start-point-vertical, $start-colour $start-position,$end-colour $end-position);
}