/* 
 * Mixin: inner 
 * $columns should always be an even number 
 */
@mixin inner($columns) {
  @include span-columns( $columns );
  @include shift( ( 24 - $columns ) / 2 );
//  @include media($large) {
//    @include shift(2);
//    @include span-columns(20)
//  }
  @include media($medium) {
    @include shift(1 of 12);
    @include span-columns(10 of 12);
  }
  @include media($small) {
    @include shift(0);
    @include span-columns(4);
  }  
}

/* 
 * Mixin: fullbleed
 * $columns should always be an even number 
 */
@mixin fullbleed($columns) {
// vz: TO BE IMPLEMENTED
}

/* 
 * Mixin: small
 * $columns should always be an even number 
 */
@mixin small($columns) {
  @include media($small) {
    @include span-columns($columns);
  }
}

// a mixin for screen-reader-specific content
@mixin sr-only($focus:false) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  @if ($focus == true) {
    &:focus,
    &:active {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
    }
  }
}

@mixin arrow-top($size:10px, $background:#fff, $border-width:1px, $border-color:#ccc) {
  border: 1px solid red;
  position: relative;
  background: $background;
  border: $border-width solid $border-color;

  &:after,
  &:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: transparent;
    border-bottom-color: $background;
    border-width: $size;
    margin-left: -$size;
  }

  &:before {
    border-color: transparent;
    border-bottom-color: $border-color;
    border-width: $size + $border-width;
    margin-left: -($size + $border-width);
  }
}

// set left and right padding (but keep vertical padding the same)
@mixin padding-horizontal($padding) {
  padding-left: $padding;
  padding-right: $padding;
}

// set top and bottom padding (but keep horizontal padding the same)
@mixin padding-vertical($padding) {
  padding-top: $padding;
  padding-bottom: $padding;
}
