//LAYOUT //
$ftt: 97%; // use on blocks : allows to reajust gloabally the entire blocks :it will fit for each media-query feature, it's a compromise to find out;)
$ft_container: 16px; // font to display on main blocks ;)
$bgreal: #111  ; // add "!important" to overwrite specific media queries background-colors;)


@mixin breakpoint($point) {
  //navy
  @if $point == XXS {
    @media (max-height: 320px) and (max-width: 480px) and (orientation: portrait) {
      @content;
    }
  }
  //gray
  @if $point == XX-S {
    @media (max-height: 320px) and (max-width: 360px) and (orientation: landscape) {
      @content;
    }
  }
  //blue
  @if $point == XS {
    @media (min-width: 320px) and (max-width: 568px) and (min-height: 320px) and (max-height: 859px) {
      @content;
    }
  }
 //deeppink
  @if $point == X-S {
 @media (min-height: 321px) and (max-height: 568px) and (min-width: 321px) and (max-width: 859px) and (orientation:landscape){
      @content;
    }
  }
  //darkcyan
  @if $point == S {
    @media (min-width: 530px) and (max-width: 1023px) and (min-height: 321px) and (max-height: 860px) {
      @content;
    }
  }
  //yellowgreen
  @if $point == M {
    @media (min-width: 600px) and (max-width: 1023px) and (min-height: 601px) and (max-height: 1200px) {
      @content;
    }
  }
  //gold
  @if $point == XM {
    @media (min-width: 600px) and (max-width: 1023px) and (min-height: 1201px) {
      @content;
    }
  }
  //indigo
  @if $point == XXM {
    @media (min-width: 1024px) and (max-width: 1249px) and (min-height: 600px) and (max-height: 900px) {
      @content;
    }
  }
  //tomato
  @if $point == L {
    @media (min-width: 1250px) and (max-width: 1949px) and (min-height: 700px) and (max-height: 900px) {
      @content;
    }
  }
  //red
  @if $point == XL {
    @media (min-width: 1250Px) and (min-height: 901px) {
      @content;
    }
  }
}

@mixin background($bg) {
  @if $bg == bgXXS {
    background: navy;  
  }
  @if $bg == bgXX-S {
    background: gray;
  }
  @if $bg == bgXS {
    background: blue;
  }
 @if $bg == bgX-S {
    background: deeppink;
  }
  @if $bg == bgS {
    background: darkcyan;
  }
  @if $bg == bgM {
    background: yellowgreen;
  }
  @if $bg == bgXM {
    background: darken(gold, 10);
  }
  @if $bg == bgXXM {
    background: indigo;
  }
  @if $bg == bgL {
    background: tomato;
  }
  @if $bg == bgXL {
    background: red;
  }
}

@mixin flex($flex: null, $dir: null, $alignItems: null, $alignContent: null, $just: null, $top:null, $left:null,$width:null) {
  height: 100vh;
  top: $top;
  left: $left;
  width: $width;
  transform: translate(-50%, -50%);
  display: $flex;
  flex-direction: $dir;
  align-items: $alignItems;
  justify-content: $just; //bloc haut/bas
  align-content: $alignContent;
}

@mixin buttomclose($withclose:null,$heightclose:null,$topclose:null,$rightclose:null) {
    width:$withclose;
    height:$heightclose;
    top:$topclose;
    right:$rightclose;
}

@mixin fontsize($ft) {
  @if $ft == ftXXS {
    font-size: $ftt * .5;
  }
  @if $ft == ftXS {
    font-size: $ftt * .75;
  }
  @if $ft == ftS {
    font-size: $ftt *.9;
  }
  @if $ft == ftM {
    font-size: $ftt * 1.1;
  }
  @if $ft == ftXM {
    font-size: $ftt * 1.25;
  }
  @if $ft == ftXXM {
    font-size: $ftt * 1.1;
  }
  @if $ft == ftL {
    font-size: $ftt * 1.35;
  }
  @if $ft == ftXL {
    font-size: $ftt * 1.7;
  }
}

@mixin lineheight($lh) {
  @if $lh == lhXXS {
    line-height: 1.2em;
  }
  @if $lh == lhXS {
    line-height: 1.3em;
  }
  @if $lh == lhS {
    line-height: 1.4em;
  }
  @if $lh == lhM {
    line-height: 1.4em;
  }
  @if $lh == lhXM {
    line-height: 1.5em;
  }
  @if $lh == lhXXM {
    line-height: 1.6em;
  }
  @if $lh == lhL {
    line-height: 1.6em;
  }
  @if $lh == lhXL {
    line-height: 1.8em;
  }
}

@mixin padding($pd) {
  @if $pd == pdXXS {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdXS {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdS {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdM {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdXM {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdXXM {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdL {
    padding: 0 6vw 1em 6vw;
  }
  @if $pd == pdXL {
    padding: 0 6vw 1em 6vw;
  }
}