// Crust (A Tiny Sass Mixin Library)
@mixin clearfix(){
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Show
@mixin show() {
  visibility: visible;
}

// Hide
@mixin hide() {
  display: none !important;
  visibility: hidden;
}

// Transition
@mixin transition($value) {
-webkit-transition: $value;
   -moz-transition: $value;
     -o-transition: $value;
        transition: $value;
}

// Box Sizing
@mixin box-sizing($value) {
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value;
          box-sizing: $value;
}

// Box Shadow
@mixin box-shadow ($value) {
  -webkit-box-shadow: $value;
     -moz-box-shadow: $value;
          box-shadow: $value;
}

// User Select
@mixin user-select($value) {
  -webkit-touch-callout: $value;
    -webkit-user-select: $value;
     -khtml-user-select: $value;
       -moz-user-select: $value;
        -ms-user-select: $value;
            user-select: $value;
}

// Respond To
@mixin respond-to($type, $m: max-width) {
  @if $type == handheld {
    @media screen and (max-width: 767px) {
      @content;
    }
  } @else if $type == webkit {
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      @content;
    }
  } @else if $type == nonhandheld {
    @media screen and (min-width: 769px) {
      @content;
    }
  } @else {
    @media screen and ($m: $type) {
      @content;
    }
  }
}

@media screen and (min-width: $tablet-mid) {
  .phone-hide   {@include show();}
  .tablet-hide  {@include show();}
  .phone-show   {@include hide();}
  .tablet-show  {@include hide();}
  .tablet-only  {@include hide();}
}

// tablets
@media screen and (max-width: $tablet-mid - 1) and (min-width: $phone) {
  .phone-hide   {@include show();}
  .tablet-hide  {@include hide();}
  .phone-show   {@include hide();}
  .tablet-show  {@include show();}
  .tablet-only  {@include show();}
}

// mobile phones
@media screen and (max-width: $phone - 1) {
  .phone-hide   {@include hide();}
  .tablet-hide  {@include hide();}
  .phone-show   {@include show();}
  .tablet-show  {@include show();}
  .tablet-only  {@include hide();}
}