/* Mixin file for sass.  Here is where we define our variables and
   browser compatability functions used in all scss/sass files */

/* Transision defaults */
$speed: 0.1s;
$easing: linear;

$default-border-radius: 3px;

/* Style includes */

@mixin button-gradient($color){
  @include linear-gradient(lighten($color,20%), $color);
}

@mixin button-gradient-hover($color){
  @include linear-gradient(lighten($color,20%), darken(saturate($color,15%),10%));
}

@mixin button-gradient-hover-no-saturation($color){
  @include linear-gradient(lighten($color,20%), darken($color,15%));
}

@mixin header-gradient($color) {
  @include linear-gradient(lighten($color, 2%), darken($color, 2%), 0%, 80%);
}

@mixin linear-gradient($from, $to, $start:0%, $end:100%){
  background: mix($from,$to);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";

  background: linear-gradient(to bottom, $from $start, $to $end);
}

@mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){
  background-image: mix($from,$to);
  background-image: linear-gradient(left, $from $start, $to $end);
}


@mixin transition($type, $speed:$speed, $easing:$easing){
    transition : $type $speed $easing;
}

@mixin animate($name, $speed:$speed, $occurances:"") {
    animation : $name $speed $occurances;
}

@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
  animation: $name $speed $easing;
}

@mixin video-overlay(){
  position: relative;
  cursor: pointer;

  .video-overlay {
    background : {
      color: rgba(0,0,0, .65);
      image : image-url('buttons/playbtn.png');
      repeat : no-repeat;
      position : 10px center;
      size : 60px 60px;
    }

    border-radius: 40px 10px 10px 40px;
    box-shadow: 0 0 32px rgba(255,255,255,.5);

    position : absolute;
    top : 50%;
    left : 10%;
    right : 10%;

    height: 80px;
    margin-top: -40px;
    padding: 10px 7px 10px 80px;
    overflow: hidden;

    line-height: 60px;

    & > div {
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
    }

    & > div > div {
      opacity: 1;
      overflow: hidden;
      text-shadow: -1px -1px 0 #000, 0 0 7px #111;
      color: #F0F0F0;
      font-size: 0.9em;
      text-overflow: ellipsis;
    }

    .title {
      font-weight: bold;
      white-space: nowrap;
      line-height: .95em;
    }
    .meta {
      font-size: .94em;
      line-height: 1.3em;
      white-space: nowrap;
      opacity: 0.9;

      a {
        color: lighten($blue, 25%);
      }
      a:visited {
        color: $blue;
      }
    }
    .desc {
      font-size: .91em;
      line-height: .97em;
      max-height: 35px;
    }
  }
}