@charset 'UTF-8';

////
/// Flavor SCSS Grid-system Options
/// @group grid-system-options
/// @author blackmirror1980
////

@function extend-breakpoints($breakpoints) {
  $breakpoints-keys: map-keys($breakpoints);
  $breakpoint-actual: null;
  $breakpoint-previous: null;

  @for $i from length($breakpoints-keys) * -1 through -1 {
    $breakpoint-key: nth($breakpoints-keys, abs($i));

    $breakpoint-actual: map-get($breakpoints, $breakpoint-key);

    $max-viewport-width: null;

    @if $breakpoint-previous != null {
      $max-viewport-width: map-get($breakpoint-previous, 'min-viewport-width') - .01rem;
    }

    $breakpoints: map-merge($breakpoints, ($breakpoint-key: map-merge($breakpoint-actual, (
      max-viewport-width: $max-viewport-width,
    ))));

    $breakpoint-previous: $breakpoint-actual;
  }

  @return $breakpoints;
}

// sass-lint:disable indentation
$columns-default: 12; // grid-system columns default number
$gutter-default: 1.5rem; // grid-system grid gutter default number

$common-breakpoints: (
  sm: ( // small devices
    container-width: 72rem,
    min-viewport-width: 76.8rem,
  ),
  md: ( // medium devices
    container-width: 96rem,
    min-viewport-width: 99.2rem,
  ),
  lg: ( // large devices
    container-width: 114rem,
    min-viewport-width: 120rem,
  ),
  xl: ( // extra large devices
    container-width: 120rem,
    min-viewport-width: 160rem,
  ),
  fhd: ( // full HD devices
    container-width: 160rem,
    min-viewport-width: 192rem,
  ),
  qhd: ( // quad HD (2k) devices
    container-width: 192rem,
    min-viewport-width: 256rem,
  ),
  uhd: ( // ultra HD (4k) devices
    container-width: 256rem,
    min-viewport-width: 384rem,
  ),
); // common-breakpoints used as default for container breakpoints

$first-breakpoint-default: ( //first column breakpoint used as default without media queries
  container-width: 100%,
  min-viewport-width: 32rem,
);

$columns-breakpoints: map-merge((
  sp: $first-breakpoint-default, // common smartphones
  ip: ( // iphone (iphone6 and above)
    container-width: 32rem,
    min-viewport-width: 37.5rem,
  ),
  ipp: ( // iphone plus (iphone6 plus and above)
    container-width: 32rem,
    min-viewport-width: 41.4rem,
  ),
  xs: ( // extra small devices
    container-width: 48rem,
    min-viewport-width: 57.6rem,
  ),
), $common-breakpoints); // columns-breakpoints used for media queries and column classes sizes & positions

$breakpoints-default: extend-breakpoints($columns-breakpoints);

$gutter: $gutter-default;

$gutter-margin: ($gutter / -2);
$gutter-padding: ($gutter / 2);

@import 'typography';