// Flexbox display
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($values) {
  -webkit-box-flex: $values;
     -moz-box-flex: $values;
      -webkit-flex: $values;
      -ms-flex: $values;
          flex: $values;
}

@mixin inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

//----------------------------------------------------------------------

// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// h
@mixin flex-direction($value: column) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap) {
  -webkit-flex-wrap: $wrap;
     -moz-flex-wrap: $wrap;
      -ms-flex-wrap: $wrap;
          flex-wrap: $wrap;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($width) {
  -webkit-flex-basis: $width;
     -moz-flex-basis: $width;
      -ms-flex-basis: $width;
          flex-basis: $width;
}



// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}


// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  } @else if $value == space-around {
    -ms-flex-pack: distribute;
  } @else {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}








@mixin paddingAll($val) {
  .pA#{$val} {padding: #{$val}px #{$val}px;}
  .pT#{$val} {padding-top: #{$val}px;}
  .pB#{$val} {padding-bottom: #{$val}px;}
  .pR#{$val} {padding-right: #{$val}px;}
  .pL#{$val} {padding-left: #{$val}px;}
  .pTB#{$val} {padding-top: #{$val}px; padding-bottom: #{$val}px;}
  .pLR#{$val} {padding-left: #{$val}px; padding-right: #{$val}px;}

  .ltr .pRa#{$val} {padding-right: #{$val}px;}
  .rtl .pRa#{$val} {padding-left: #{$val}px;}
  .ltr .pLa#{$val} {padding-left: #{$val}px;}
  .rtl .pLa#{$val} {padding-right: #{$val}px;}

  // force
  .pA#{$val}-f {padding: #{$val}px #{$val}px!important;}
  .pT#{$val}-f {padding-top: #{$val}px!important;}
  .pB#{$val}-f {padding-bottom: #{$val}px!important;}
  .pR#{$val}-f {padding-right: #{$val}px!important;}
  .pL#{$val}-f {padding-left: #{$val}px!important;}
  .pTB#{$val}-f {padding-top: #{$val}px!important;; padding-bottom: #{$val}px!important;}
  .pLR#{$val}-f {padding-left: #{$val}px!important;; padding-right: #{$val}px!important;}

  .ltr .pRa#{$val}-f {padding-right: #{$val}px!important;}
  .rtl .pRa#{$val}-f {padding-left: #{$val}px!important;}
  .ltr .pLa#{$val}-f {padding-left: #{$val}px!important;}
  .rtl .pLa#{$val}-f {padding-right: #{$val}px!important;}
}

@mixin marginAll($val) {
  .mA#{$val} {margin: #{$val}px #{$val}px;}
  .mT#{$val} {margin-top: #{$val}px;}
  .mB#{$val} {margin-bottom: #{$val}px;}
  .mR#{$val} {margin-right: #{$val}px;}
  .mL#{$val} {margin-left: #{$val}px;}
  .mTB#{$val} {margin-top: #{$val}px; margin-bottom: #{$val}px;}
  .mLR#{$val} {margin-left: #{$val}px; margin-right: #{$val}px;}

  .ltr .mRa#{$val} {margin-right: #{$val}px;}
  .rtl .mRa#{$val} {margin-left: #{$val}px;}
  .ltr .mLa#{$val} {margin-left: #{$val}px;}
  .rtl .mLa#{$val} {margin-right: #{$val}px;}

  // force
  .mA#{$val}-f {margin: #{$val}px #{$val}px!important;}
  .mT#{$val}-f {margin-top: #{$val}px!important;}
  .mB#{$val}-f {margin-bottom: #{$val}px!important;}
  .mR#{$val}-f {margin-right: #{$val}px!important;}
  .mL#{$val}-f {margin-left: #{$val}px!important;}
  .mTB#{$val}-f {margin-top: #{$val}px!important;; margin-bottom: #{$val}px!important;}
  .mLR#{$val}-f {margin-left: #{$val}px!important;; margin-right: #{$val}px!important;}

  .ltr .mRa#{$val}-f {margin-right: #{$val}px!important;}
  .rtl .mRa#{$val}-f {margin-left: #{$val}px!important;}
  .ltr .mLa#{$val}-f {margin-left: #{$val}px!important;}
  .rtl .mLa#{$val}-f {margin-right: #{$val}px!important;}
}

@mixin margin($val) {
  padding: $val $val;
}


@mixin paddingCreate($pads...) {
	padding: $pads;
}


@mixin push--auto {
	margin: {
		left: auto;
		right: auto;
	}
}


@mixin input-placeholder {
	&.mlaceholder { @content; }
	&:-moz-placeholder { @content; }
	&::-moz-placeholder { @content; }
	&:-ms-input-placeholder { @content; }
	&::-webkit-input-placeholder { @content; }
}


@mixin overlay() {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
	 -moz-border-radius: $radius;
	  -ms-border-radius: $radius;
		  border-radius: $radius;
}


@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}


@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin user-select($val) {
@if $val == none
{
  -webkit-touch-callout:$val;
  -khtml-user-select:$val;
  -ms-user-select:$val;
  cursor:default;
}
  -webkit-user-select:$val;
  -moz-user-select:$val;
  user-select:$val;
}




@mixin breakpoint($media) {
    /* Landscape phones and down */
    @if $media == phone {
        @media (max-width: 480px) { @content; }
    }
    /* Landscape phone to portrait tablet */
    @else if $media == tablet-portrait {
        @media (max-width: 767px) {@content; }
    }
    /* Portrait tablet to landscape and desktop */
    @else if $media == tablet-landscape-desktop {
        @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    /* Large desktop */
    @else if $media == large-desktop {
        @media (min-width: 1200px) { @content; }
    }
    // Non-Retina
    @else if $media == non-retina {
        @media screen and (-webkit-max-device-pixel-ratio: 1) { @content; }
    }
    // Retina Only
    @else if $media == retina {
        @media screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
    }
    // Specific max width
    @else {
        @media only screen and (max-width: #{$media}px) { @content; }
    }
	@else {
	  @warn "Breakpoint mixin supports: xs, sm, md, lg";
	}
}

@mixin links ($link:null, $hover:null, $focus:null, $active:null, $visited:null) {
  @if $link {
    color: $link;
  }

  @if $hover {
    &:hover {
      color: $hover;
    }
  }
  @if $focus {
    &:focus {
      color: $focus;
    }
  }
  @if $active {
    &:active {
      color: $active;
    }
  }
  @if $visited {
    &:visited {
      color: $visited;
    }
  }
}