//======================================================================
// mixin
//======================================================================

//=================================
// clearfix
//=================================
@mixin cf {
  @include has-layout;
  &:after {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    height: 0;
    content: '\0020';
  }
}

//=================================
// min,max-width height 初期化
//=================================
@mixin maxW_init {
  max-width: auto;
  max-width: initial;
  max-width: 100%;
}
@mixin maxH_init {
  max-height: auto;
  max-height: initial;
  max-height: 100%;
}
@mixin minW_init {
  min-width: auto;
  min-width: initial;
}
@mixin minH_init {
  min-height: auto;
  min-height: initial;
}

//=================================
// safe-area
//=================================
@mixin safe_area {
  padding-top: constant(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

//=================================
// user-select
//=================================
@mixin user_select($value:none) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

//=================================
// calc
//=================================
@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -o-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

//=================================
// overflow-scrolling
//=================================
@mixin scrolling {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

//=================================
// writing-mode 縦書き
//=================================
@mixin writing_mode_vrl {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

//=================================
// aタグのカラー変更
//=================================
@mixin a_tag($color1, $color2) {
  &:link, &:active, &:visited {
    color: $color1;
    text-decoration: none;
    cursor: pointer;
  }
  &:hover {
    color: $color2;
  }
}

//=================================
// プレースホルダーのカラー変更
//=================================
@mixin placeholder($color) {
  &:placeholder-shown {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
  &:-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
}

//=================================
// animation
//=================================
@mixin keyframes($animation-name: animation) {
  @-webkit-keyframes #{$animation-name} {
    @at-root {
      @content;
    }
  }
  @-moz-keyframes #{$animation-name} {
    @at-root {
      @content;
    }
  }
  @keyframes #{$animation-name} {
    @at-root {
      @content;
    }
  }
}
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

//=================================
// media query
//=================================
// min モバイルファースト
@mixin mq_min_481 {
  @media screen and (min-width: 481px) {
    @content;
  }
}
@mixin mq_min_641 {
  @media screen and (min-width: 641px) {
    @content;
  }
}
@mixin mq_min_769 {
  @media screen and (min-width: 769px) {
    @content;
  }
}
@mixin mq_min_1025 {
  @media screen and (min-width: 1025px) {
    @content;
  }
}
@mixin mq_min_1281 {
  @media screen and (min-width: 1281px) {
    @content;
  }
}
// max PCデザインからコーディング
@mixin mq_max_1024 {
  @media screen and (max-width: 1024px) {
    @content;
  }
}
@mixin mq_max_768 {
  @media screen and (max-width: 768px) {
    @content;
  }
}
@mixin mq_max_640 {
  @media screen and (max-width: 640px) {
    @content;
  }
}
@mixin mq_max_480 {
  @media screen and (max-width: 480px) {
    @content;
  }
}

//=================================
// layout
//=================================
// margin auto center center
@mixin vh_mar_c {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
// translate 縦top
@mixin vh_tra_t_l {
  @include translate(0,0);
  position: absolute;
  top: 0;
  left: 0;
}
@mixin vh_tra_t_c {
  @include translate(-50%,0);
  position: absolute;
  top: 0;
  left: 50%;
}
@mixin vh_tra_t_r {
  @include translate(0,0);
  position: absolute;
  top: 0;
  right: 0;
}
// translate 縦center
@mixin vh_tra_c_l {
  @include translate(0,-50%);
  position: absolute;
  top: 50%;
  left: 0;
}
@mixin vh_tra_c_c {
  @include translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
@mixin vh_tra_c_r {
  @include translate(0,-50%);
  position: absolute;
  top: 50%;
  right: 0;
}
// translate 縦bottom
@mixin vh_tra_b_l {
  @include translate(0,0);
  position: absolute;
  bottom: 0;
  left: 0;
}
@mixin vh_tra_b_c {
  @include translate(-50%,0);
  position: absolute;
  bottom: 0;
  left: 50%;
}
@mixin vh_tra_b_r {
  @include translate(0,0);
  position: absolute;
  bottom: 0;
  right: 0;
}

//=================================
// flex
//=================================
// Flexbox display
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
// The 'flex' shorthand
// <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;
}
// Flex Flow Direction
// row | row-reverse | column | column-reverse
@mixin flex_direction($direction) {
  -webkit-flex-direction: $direction;
  -moz-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}
// Flex Line Wrapping
// nowrap | wrap | wrap-reverse
@mixin flex_wrap($wrap) {
  -webkit-flex-wrap: $wrap;
  -moz-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}
// Flex Direction and Wrap
// <flex-direction> || <flex-wrap>
@mixin flex_flow($flow) {
  -webkit-flex-flow: $flow;
  -moz-flex-flow: $flow;
  -ms-flex-flow: $flow;
  flex-flow: $flow;
}
// Display Order
// <integer>
@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}
// Flex grow factor
// <number>
@mixin flex_grow($grow) {
  -webkit-flex-grow: $grow;
  -moz-flex-grow: $grow;
  -ms-flex-grow: $grow;
  flex-grow: $grow;
}
// Flex shrink
// <number>
@mixin flex_shrink($shrink) {
  -webkit-flex-shrink: $shrink;
  -moz-flex-shrink: $shrink;
  -ms-flex-shrink: $shrink;
  flex-shrink: $shrink;
}
// Flex basis
// <width>
@mixin flex_basis($width) {
  -webkit-flex-basis: $width;
  -moz-flex-basis: $width;
  -ms-flex-basis: $width;
  flex-basis: $width;
}
// Axis Alignment
// flex-start | flex-end | center | space-between | space-around
@mixin justify_content($justify) {
  -webkit-justify-content: $justify;
  -moz-justify-content: $justify;
  -ms-justify-content: $justify;
  justify-content: $justify;
  -ms-flex-pack: $justify;
}
// Packing Flex Lines
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align_content($align) {
  -webkit-align-content: $align;
  -moz-align-content: $align;
  -ms-align-content: $align;
  align-content: $align;
}
// Cross-axis Alignment
// flex-start | flex-end | center | baseline | stretch
@mixin align_items($align) {
  -webkit-align-items: $align;
  -moz-align-items: $align;
  -ms-align-items: $align;
  align-items: $align;
}
// Cross-axis Alignment
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align_self($align) {
  -webkit-align-self: $align;
  -moz-align-self: $align;
  -ms-align-self: $align;
  align-self: $align;
}

//=================================
// flex layout
//=================================
// 上下左右中央
@mixin flex_scc {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(center);
  @include align_items(center);
}
// 上下左右中央（縦並び）
@mixin flex_vcc {
  @include flexbox();
  @include flex_direction(column);
  @include justify_content(center);
  @include align_items(center);
}
// 上下中央（左寄せ）
@mixin flex_vcl {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(flex-start);
  @include align_items(center);
}
// 上下中央（右寄せ）
@mixin flex_vcr {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(flex-end);
  @include align_items(center);
}
// 中央表示、上端揃え
@mixin flex_vtc {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(center);
  @include align_items(flex-start);
}
// 中央表示、下端揃え
@mixin flex_vbc {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(center);
  @include align_items(flex-end);
}
// 中央表示、高さ揃え
@mixin flex_vcs {
  @include flexbox();
  @include flex_direction(row);
  @include justify_content(center);
  @include align_items(stretch);
}