/*

   samples :  pl-i00 , w-mn02 , w-mn-i0025 , 
                                                               |                 |
                                                               |                 |
                 sass & css                                    |     sass        |  css 
                                                               |                 |
    [prefix(l,r,t,b)][name      ]-[middle (w,h)]-[important   ]|(number & type)  |[type][number]
     ----------------| width :w  | max :mx      | !important:i | ?% or ?px or .. | ???? => ??.??px
     ----------------| height:h  | min :mn      |              |                 | p???? => ??.??%
     padding:p       | left  :l  |--------------|              |                 |
     margin :m       | right :r  |--------------|              |                 |
     border :b       | top   :t  |--------------|              |                 |
                     | bottom:b  |--------------|              |                 |
   
    sass sample : @include w(50em);                       | css sample : w-20 => (20*32)px
                  @include w-l-i(50em);                   |              w-p05 => 5%

    dev/positions : have just sass version for use in sass
    general/positions : generate css (00,0.25,0.5,01,1.5,2.2.5,3,4,..,32)px 
                                     (05,10,15,..,95,full)%
*/


@mixin  w-mx($pm){max-width: $pm;}
@mixin  h-mx($pm){max-height: $pm;}
@mixin  w-mn($pm){min-width: $pm;}
@mixin  h-mn($pm){min-height: $pm;}
@mixin  w-mx-i($pm) {max-width: $pm !important;}
@mixin  h-mx-i($pm) {max-height: $pm !important;}
@mixin  w-mn-i($pm) {min-width: $pm !important;}
@mixin  h-mn-i($pm) {min-height: $pm !important;}
@mixin  w($pm){width: $pm;} 
@mixin  h($pm){height: $pm;}
@mixin  l($pm){left: $pm;}
@mixin  r($pm){right: $pm;}
@mixin  t($pm){top: $pm;}
@mixin  b($pm){bottom: $pm;}

@mixin  ln($pm){left: -$pm;}
@mixin  rn($pm){right: -$pm;}
@mixin  tn($pm){top: -$pm;}
@mixin  bn($pm){bottom: -$pm;}


@mixin  pl($pm){padding-left: $pm;}
@mixin  pr($pm){padding-right: $pm;}
@mixin  pt($pm){padding-top: $pm;    }
@mixin  pb($pm){padding-bottom: $pm;}
@mixin  ptb($pm){padding-bottom: $pm;padding-top: $pm;}
@mixin  plr($pm){padding-left: $pm;padding-right: $pm;}
@mixin  p($pm){padding : $pm;}
@mixin  ptb-i($pm){padding-bottom: $pm !important;padding-top: $pm !important;}
@mixin  plr-i($pm){padding-left: $pm !important;padding-right: $pm !important;}
@mixin  p-i($pm){padding : $pm;}

@mixin  ml($pm){margin-left: $pm;    }
@mixin  mr($pm){margin-right: $pm;}
@mixin  mt($pm){margin-top: $pm;}
@mixin  mb($pm){margin-bottom: $pm;} 
@mixin  mtb($pm){margin-bottom: $pm;margin-top: $pm;}
@mixin  mlr($pm){margin-left: $pm;margin-right: $pm;}
@mixin  m($pm){margin : $pm;}
@mixin  mtb-i($pm){margin-bottom: $pm!important;margin-top: $pm !important;}
@mixin  mlr-i($pm){margin-left: $pm !important;margin-right: $pm!important;}
@mixin  m-i($pm){margin : $pm !important;}

@mixin  bl($pm){border-left-width: $pm;}
@mixin  br($pm){border-right-width: $pm;}
@mixin  bt($pm){border-top-width: $pm;}
@mixin  bb($pm){border-bottom-width: $pm;} 
@mixin  ba($pm){border-width: $pm;} 

@mixin  fs($pm){font-size: $pm/8.0;} 

@mixin  w-i($pm){width: $pm !important;}
@mixin  h-i($pm){height: $pm !important;}
@mixin  l-i($pm){left: $pm !important;}
@mixin  r-i($pm){right: $pm !important;}
@mixin  t-i($pm){top: $pm !important;}
@mixin  b-i($pm){bottom: $pm !important;}
@mixin  pl-i($pm){padding-left: $pm !important;}
@mixin  pr-i($pm){padding-right: $pm !important;}
@mixin  pt-i($pm){padding-top: $pm !important;}
@mixin  pb-i($pm){padding-bottom: $pm !important;}
@mixin  ml-i($pm){margin-left: $pm !important;}
@mixin  mr-i($pm){margin-right: $pm !important;}
@mixin  mt-i($pm){margin-top: $pm !important;}
@mixin  mb-i($pm){margin-bottom: $pm !important;}
@mixin  bl-i($pm){border-left-style:  solid  !important; border-left-width: $pm !important;}
@mixin  br-i($pm){border-right-style:  solid  !important; border-right-width: $pm !important;}
@mixin  bt-i($pm){border-top-style:   solid  !important; border-top-width: $pm !important;}
@mixin  bb-i($pm){border-bottom-style:solid  !important;   border-bottom-width: $pm !important;}
@mixin  ba-i($pm){border-style:solid  !important;   border-width: $pm !important;}

 

@mixin size($param) { 
  .w-mx-#{$p}   { @include w-mx  ($param);} 
  .h-mx-#{$p}   { @include h-mx  ($param);} 
  .w-mn-#{$p}   { @include w-mn  ($param);} 
  .h-mn-#{$p}   { @include h-mn  ($param);} 
  .w-mx-i-#{$p} { @include w-mx-i($param);} 
  .h-mx-i-#{$p} { @include h-mx-i($param);} 
  .w-mn-i-#{$p} { @include w-mn-i($param);} 
  .h-mn-i-#{$p} { @include h-mn-i($param);} 
  .w-#{$p}      { @include w     ($param);}
  .h-#{$p}      { @include h     ($param);}
  .l-#{$p}      { @include l     ($param);}
  .r-#{$p}      { @include r     ($param);}
  .t-#{$p}      { @include t     ($param);}
  .b-#{$p}      { @include b     ($param);}
  .pl-#{$p}     { @include pl    ($param);}
  .pr-#{$p}     { @include pr    ($param);}
  .pt-#{$p}     { @include pt    ($param);}
  .pb-#{$p}     { @include pb    ($param);}
  .ptb-#{$p}     { @include ptb    ($param);}
  .plr-#{$p}     { @include plr ($param);}
  .p-#{$p}      { @include p     ($param);}
  .ptb-i-#{$p}     { @include ptb-i    ($param);}
  .plr-i-#{$p}     { @include plr-i ($param);}
  .p-i-#{$p}      { @include p-i     ($param);}

  .ml-#{$p}     { @include ml    ($param);}
  .mr-#{$p}     { @include mr    ($param);}
  .mt-#{$p}     { @include mt    ($param);}
  .mb-#{$p}     { @include mb    ($param);}
  .mtb-#{$p}     { @include mtb    ($param);}
  .mlr-#{$p}     { @include mlr    ($param);}
  .m-#{$p}      { @include m     ($param);}
  .mtb-i-#{$p}     { @include mtb-i    ($param);}
  .mlr-i-#{$p}     { @include mlr-i    ($param);}
  .m-i-#{$p}      { @include m-i     ($param);}

  .fs-#{$p}     { @include fs    ($param);}
 
  .w-i-#{$p}    { @include w-i   ($param);}
  .h-i-#{$p}    { @include h-i   ($param);}
  .l-i-#{$p}    { @include l-i   ($param);}
  .r-i-#{$p}    { @include r-i   ($param);}
  .t-i-#{$p}    { @include t-i   ($param);}
  .b-i-#{$p}    { @include b-i   ($param);}
  .pl-i-#{$p}   { @include pl-i  ($param);}
  .pr-i-#{$p}   { @include pr-i  ($param);}
  .pt-i-#{$p}   { @include pt-i  ($param);}
  .pb-i-#{$p}   { @include pb-i  ($param);}
  .ml-i-#{$p}   { @include ml-i  ($param);}
  .mr-i-#{$p}   { @include mr-i  ($param);}
  .mt-i-#{$p}   { @include mt-i  ($param);}
  .mb-i-#{$p}   { @include mb-i  ($param);}
  
   

  .l-n#{$p}      { @include ln     ($param);}
  .r-n#{$p}      { @include rn     ($param);}
  .t-n#{$p}      { @include tn     ($param);}
  .b-n#{$p}      { @include bn     ($param);} 
} 

@mixin border($param){
  .bl-#{$p}     { @include bl    ($param);}
  .br-#{$p}     { @include br    ($param);}
  .bt-#{$p}     { @include bt    ($param);}
  .bb-#{$p}     { @include bb    ($param);}
  .ba-#{$p}     { @include ba    ($param);}
  
  .bl-i-#{$p}   { @include bl-i  ($param);}
  .br-i-#{$p}   { @include br-i  ($param);}
  .bt-i-#{$p}   { @include bt-i  ($param);}
  .bb-i-#{$p}   { @include bb-i  ($param);} 
  .ba-i-#{$p}   { @include ba-i  ($param);}  
}

 

@mixin z($i){ z-index:$i;}
@mixin z-i($i){ z-index:$i !important;}

@mixin ab { position:absolute;}
@mixin fx { position:fixed;}
@mixin rt { position:relative;}
 


@mixin media-zero {
    display:none;
}
@mixin media-one {
    display:block;
}

@mixin ms-w1 {}   
@mixin ms-w2 {}  
@mixin ms-w3 {}  
@mixin ms-w4 {} 

@mixin ms-h1 {}   
@mixin ms-h2 {}  
@mixin ms-h3 {}  
@mixin ms-h4 {} 
/* break points and media query

    how to define
    @include media-[w or h]-[breakpoints count]brk(breakpoint name , sizes ... );
    breakpoints count = [2,3,4]
    sample
    @include media-w-3brk('aname',200,500);
    @include media-h-2brk('bname',200 );

    use 
    brk-aname000 : hide in all
    brk-aname010 : show in width size number 2
    brk-aname110 : show in width size number 2 and 1
    brk-aname-i110 : important  show in width size number 2 and 1
    ...
     brk-bname10 : show in height size number 1


*/
/*#region 2 breakpoints */


@mixin media-2helper($j,$n,$style) {

     @for $i1 from 0 through 1
      { @for $i2 from 0 through 1 
        { 
           @if ($j == 1 and $i1 == 0 ) or ($j == 2 and $i2 == 0 )
           {  
               .#{$n}-#{$i1}#{$i2} { @include media-zero;} 
               
           }

          @if ($j == 1 and $i1 == 1 ) or ($j == 2 and $i2 == 1 )
           {  
               .#{$n}-#{$i1}#{$i2} { @include media-one;} 
           }

        }
      }
}

@mixin mbw-1($brk-name,$brk-s1,$style){
    @media   (max-width:$brk-s1){
        @include media-2helper(1,$brk-name,$style);
        @if ( $style )  {  @include ms-w1;}
    }  

     @media (min-width:$brk-s1)  {
        @include media-2helper(2,$brk-name,$style);
        @if ( $style )  {  @include ms-w2;}
    } 
} 
@mixin mbh-1($brk-name,$brk-s1,$style){
    @media   (max-height:$brk-s1){
        @include media-2helper(1,$brk-name,$style);
         @if ( $style )  {  @include ms-h1;}
    }  

     @media (min-height:$brk-s1)  {
        @include media-2helper(2,$brk-name,$style);
         @if ( $style )  {  @include ms-h2;}
    } 
} 
/*#endregion */

/*#region 3 breakpoints */


@mixin media-3helper($j,$n,$style) { 
     @for $i1 from 0 through 1
      { @for $i2 from 0 through 1 
        {  @for $i3 from 0 through 1 
          { 
           @if ($j == 1 and $i1 == 0 ) or ($j == 2 and $i2 == 0 ) or ($j == 3 and $i3 == 0 )
           {  
               .#{$n}-#{$i1}#{$i2}#{$i3} {@include media-zero;} 
           }

           @if ($j == 1 and $i1 == 1 ) or ($j == 2 and $i2 == 1 ) or ($j == 3 and $i3 == 1 )
           {  
               .#{$n}-#{$i1}#{$i2}#{$i3} {@include media-one;} 
           }

          
        }
      }
    }
}

@mixin mbw-2($brk-name,$brk-s1,$brk-s2,$style){
    @media   (max-width:$brk-s1){
        @include media-3helper(1,$brk-name,$style);
         @if ( $style )  {  @include ms-w1;}
    }  

     @media (min-width:$brk-s1) and (max-width:$brk-s2)  {
        @include media-3helper(2,$brk-name,$style);
         @if ( $style )  {  @include ms-w2;}
    } 
     @media (min-width:$brk-s2)  {
        @include media-3helper(3,$brk-name,$style);
         @if ( $style )  {  @include ms-w3;}
    } 
} 

@mixin mbh-2($brk-name,$brk-s1,$brk-s2,$style){
    @media   (max-height:$brk-s1){
        @include media-3helper(1,$brk-name,$style);
         @if ( $style )  {  @include ms-h1;}
    }  

     @media (min-height:$brk-s1) and (max-width:$brk-s2)  {
        @include media-3helper(2,$brk-name,$style);
         @if ( $style )  {  @include ms-h2;}
    } 
     @media (min-height:$brk-s2)  {
        @include media-3helper(3,$brk-name,$style);
         @if ( $style )  {  @include ms-h3;}
    } 
} 

/*#endregion */

/*#region 4 breakpoints */ 

@mixin media-4helper($j,$n,$style) {

     @for $i1 from 0 through 1
      { @for $i2 from 0 through 1 
        {  @for $i3 from 0 through 1 
          {  @for $i4 from 0 through 1 
           { 
           @if ($j == 1 and $i1 == 0 ) or ($j == 2 and $i2 == 0 ) or ($j == 3 and $i3 == 0 ) or ($j == 4 and $i4 == 0 )
           {  
               .#{$n}-#{$i1}#{$i2}#{$i3}#{$i4} { @include media-zero;}
                
           }
         @if ($j == 1 and $i1 == 1 ) or ($j == 2 and $i2 == 1 ) or ($j == 3 and $i3 == 1 ) or ($j == 4 and $i4 == 1 )
           {  
               .#{$n}-#{$i1}#{$i2}#{$i3}#{$i4} { @include media-one;}
                
           }

           
         }
        }
      }
    }
}

@mixin mbw-3($brk-name,$brk-s1,$brk-s2,$brk-s3,$style){
    @media   (max-width:$brk-s1){
        @include media-4helper(1,$brk-name,$style);
         @if ( $style )  {  @include ms-w1;}
    }  

     @media (min-width:$brk-s1) and (max-width:$brk-s2)  {
        @include media-4helper(2,$brk-name,$style);
         @if ( $style )  {  @include ms-w2;}
    }
      @media (min-width:$brk-s2) and (max-width:$brk-s3)  {
        @include media-4helper(3,$brk-name,$style);
         @if ( $style )  {  @include ms-w3;}
    } 
     @media (min-width:$brk-s3)  {
        @include media-4helper(4,$brk-name,$style);
         @if ( $style )  {  @include ms-w4;}
    } 
} 

@mixin mbh-3($brk-name,$brk-s1,$brk-s2,$brk-s3,$style){
    @media   (max-height:$brk-s1){
        @include media-4helper(1,$brk-name,$style);
         @if ( $style )  {  @include ms-h1;}
    }  

     @media (min-height:$brk-s1) and (max-height:$brk-s2)  {
        @include media-4helper(2,$brk-name,$style);
         @if ( $style )  {  @include ms-h2;}
    }
      @media (min-height:$brk-s2) and (max-height:$brk-s3)  {
        @include media-4helper(3,$brk-name,$style);
         @if ( $style )  {  @include ms-h3;}
    } 
     @media (min-height:$brk-s3)  {
        @include media-4helper(4,$brk-name,$style);
         @if ( $style )  {  @include ms-h4;}
    } 
} 
/*#endregion */