/* ------------------------------
    Util: Mixins
------------------------------ */

/* Calculate px to rem */
@function calculateRem($size) {
  $remSize: $size / $base-font-size;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}



/* Breakpoints */
$tablet:             1024px;


// under...

$break2: 360px;
$break3: 520px;
$break4: 680px;
$break5: 840px;
// somewhere here -- widen?
$break-wide: 1172px;

$screen-md:          1418px;

$B2: $break2;
$B3: $break3;
$B4: $break4;
$B5: $break5;

$break-menu: $break5;
$break-footer: $break5;
$break-flow: $break5;


@mixin rwd($canvas) {
    //@if $canvas == 'phone' {
    //} @else if $...
    @media only screen and (min-width: $canvas) {
        @content;
    }
}

/*
  // Print styles
  @else if $canvas == 'print' {
    @media print {
      @content;
    }
  }

}
*/


.only-l {
    display: none;
    @include rwd($break5) {
        display: block;
    }
}
.only-s {
    display: block;
    @include rwd($break5) {
        display: none;
    }
}

.lay-row {
    display: flex;
    flex-direction: row;
    column-gap: 16px;
}
.lay-col {
    display: flex;
    flex-direction: column;
}
.lay-spread {
    justify-content: space-between;
}
.lay-l-row {
    @include rwd($break5) {
        display: flex;
        flex-direction: row;
    }
}
.lay-l-block {
    @include rwd($break5) {
        display: block;
    }
}
.lay-s-col-rev {
    flex-direction: column-reverse;
    @include rwd($break5) {
        flex-direction: row;
    }
}
.lay-grow {
    flex-grow: 1;
}



$max-logical-viewport-width: 1140px + 32px;

@mixin lvw($property, $size) {
    #{$property}: $size * $max-logical-viewport-width / 100;
    
    @include rwd($break-wide) {
        #{$property}: $size * 1vw;
    }
}