@use "sass:math";

@mixin transition() {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  
  @mixin transition2($property, $duration, $timing) {
    transition: $property $duration $timing;
    -webkit-transition: $property $duration $timing;
    -moz-transition: $property $duration $timing;
    -o-transition: $property $duration $timing;
  }
  
  @mixin appearence($value) {
    appearance: $value;
    -webkit-appearance: $value;
    -moz-appearance: $value;
  }
  
  @function calculateRem($size) {
    $remSize: math.div($size, 16px);
    @return $remSize * 1rem;
  }
  
  @mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
  }
  
  @function calculateem($size) {
    $emSize: math.div($size, 16px);
    @return $emSize * 1em;
  }
  
  @mixin font-sizeem($size) {
    font-size: $size;
    font-size: calculateem($size);
  }
  
  /* CALCULATE REM FROM LINE HEIGHT */
  
  @function calculatRem($size) {
    $remSize: math.div($size, 16px);
    @return $remSize * 1rem;
  }
  
  @mixin line-height($size) {
    line-height: $size;
    line-height: calculatRem($size);
  }
  
  /*  @include line-height(14px)  */
  
  /* END CALCULATE REM FROM LINE HEIGHT */
  
  /* CALCULATE LETTER SPACING FROM PHOTOSHOP */
  
  @function letter-spacing($letterspacing) {
    $letterspacing: $letterspacing*0.001;
    @return $letterspacing + px;
  }
  
  @mixin letter-spacing($letterspacing) {
    letter-spacing: letter-spacing($letterspacing);
  }
  
  /*  END CALCULATE FROM PHOTOSHOP */
  
  /* CROSS BROWSER PREFIX */
  
  @mixin prefix($map, $vendors: webkit moz ms o) {
    @each $prop, $value in $map {
      @if $vendors {
        @each $vendor in $vendors {
          #{"-" + $vendor + "-" + $prop}: #{$value};
        }
      }
      // Dump regular property anyway
      #{$prop}: #{$value};
    }
  }
  
  /* .element {
    @include prefix((transform: translate(-50%, -50%)), webkit ms);
  }
  
  /* END CROSS BROWSER PREFIX 
  
  
  
  
  
  /***** FLEX BOX ***** /
  
  /* Flex box */
  
  @mixin flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
  }
  
  /* %flexbox { @include flexbox; } */
  
  @mixin inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  
  /*  %inline-flex { @include inline-flex; } */
  
  @mixin flex-direction($value: row) {
    @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;
  }
  
  @mixin flex-wrap($value) {
    // No Webkit Box fallback.
    -webkit-flex-wrap: $value;
    -moz-flex-wrap: $value;
    @if $value == nowrap {
      -ms-flex-wrap: none;
    } @else {
      -ms-flex-wrap: $value;
    }
    flex-wrap: $value;
  }
  
  @mixin order($int: 0) {
    -webkit-box-ordinal-group: $int + 1;
    -webkit-order: $int;
    -moz-order: $int;
    -ms-flex-order: $int;
    order: $int;
  }
  
  @mixin flex-basis($value: auto) {
    -webkit-flex-basis: $value;
    -moz-flex-basis: $value;
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
  }
  
  @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;
  }
  
  /*  %inline-flex { @include inline-flex; } */
  
  @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;
  }
  
  @mixin align-self($value: auto) {
    // No Webkit Box Fallback.
    -webkit-align-self: $value;
    -moz-align-self: $value;
    @if $value == flex-start {
      -ms-flex-item-align: start;
    } @else if $value == flex-end {
      -ms-flex-item-align: end;
    } @else {
      -ms-flex-item-align: $value;
    }
    align-self: $value;
  }
  
  @mixin align-content($value: stretch) {
    // No Webkit Box Fallback.
    -webkit-align-content: $value;
    -moz-align-content: $value;
    @if $value == flex-start {
      -ms-flex-line-pack: start;
    } @else if $value == flex-end {
      -ms-flex-line-pack: end;
    } @else {
      -ms-flex-line-pack: $value;
    }
    align-content: $value;
  }
  
  @mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
  }
  
  @mixin flex-basis($grow, $shrink, $basis) {
    -webkit-box-flex: $grow $shrink $basis;
    -moz-box-flex: $grow $shrink $basis;
    -webkit-flex: $grow $shrink $basis;
    -ms-flex: $grow $shrink $basis;
    flex: $grow $shrink $basis;
  }
  
  /* END FLEX BOX */
  
  /* Clearfix */
  
  @mixin cf() {
    *zoom: 1;
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
  
  /* End Clearfix */
  
  /* Absolute center */
  
  @mixin absolutecenter($axis: "both") {
    position: absolute;
    @if $axis == "y" {
      top: 50%;
      transform: translateY(-50%);
    }
    @if $axis == "x" {
      left: 50%;
      transform: translateX(-50%);
    }
    @if $axis == "both" {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  
  /* End Absolute center */
  
  @function strip-unit($value) {
    @return math.div($value, $value * 0 + 1);
  }
  
  @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);
  
    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
      & {
        font-size: $min-font-size;
        @media screen and (min-width: $min-vw) {
          font-size: calc(
            #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
              ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
          );
        }
        @media screen and (min-width: $max-vw) {
          font-size: $max-font-size;
        }
      }
    }
  }
  
  @mixin line-clamp($numLines) {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: block;
    /* autoprefixer: off */
    display: -webkit-box;
    -webkit-line-clamp: $numLines;
    -webkit-box-orient: vertical;
  }
  
  @mixin line-clamp02($numLines, $lineHeight) {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: block;
    /* autoprefixer: off */
    display: -webkit-box;
    -webkit-line-clamp: $numLines;
    -webkit-box-orient: vertical;
    height: $numLines * $lineHeight + unquote("em");
  }