@use "sass:math";

$tablet-small: 640px;
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;

$widths: (
    m:    $tablet,
    l:    $desktop,
    xl:   $widescreen,
    xxl:  $fullhd,
);

$width-ranges: (
    tablet-small: ($tablet-small, $tablet),
    tablet:     ($tablet, $desktop),
    desktop:    ($desktop, $widescreen),
    widescreen: ($widescreen, $fullhd),
);

@for $i from 1 through 12 {
  .col-#{$i} {
    float: left;
    box-sizing: border-box;

    @if $i < 12 {
      width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
      margin-left: 4%;
    } @else {
      width: 100%;
      margin-left: 0;
    }

    &:first-child {
      margin-left: 0;
    }
  }

  .col-no-margin-#{$i} {
    float: left;
    box-sizing: border-box;
    width: ((math.div(100%, 12))*$i);
    margin: 0;
  }

  @if $i < 12 {
    .col-offset-#{$i}:first-child {
      margin-left: (8.66666666667%*$i) !important;
    }
    .col-offset-#{$i}:not(first-child) {
      margin-left: 4% + (8.66666666667%*$i) !important;
    }
  }
}

@media screen and (max-width: calc(#{$tablet} - 1px)) {
  @for $i from 1 through 12 {
    .col-s-#{$i} {
      float: left;
      box-sizing: border-box;

      @if $i < 12 {
        width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
        margin-left: 4%;
      } @else {
        width: 100%;
        margin-left: 0;
      }

      &:first-child {
        margin-left: 0;
      }
    }

    @if $i < 12 {
      .col-offset-s-#{$i} {
        margin-left: (8.66666666667%*$i);
      }
    }

    .col-no-margin-s-#{$i} {
      float: left;
      box-sizing: border-box;
      width: (math.div(100%, 12)*$i);
    }
  }

  .s-hidden {
    display: none !important;
  }

  .s-visible {
    display: block !important;
  }
}

@mixin from($device) {
  @media screen and (min-width: $device) {
    @content;
  }
}

@mixin until($device) {
  @media screen and (max-width: calc(#{$device} - 1px)) {
    @content;
  }
}

@mixin between($from, $until) {
  @media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
    @content;
  }
}

@each $size, $width in $widths {
  @media screen and (min-width: $width) {
    @for $i from 1 through 12 {
      .col-#{$size}-#{$i} {
        float: left;
        box-sizing: border-box;

        @if $i < 12 {
          width: #{(4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0))};
          margin-left: 4%;
        } @else {
          width: 100%;
          margin-left: 0;
        }

        &:first-child {
          margin-left: 0;
        }
      }

      @if $i < 12 {
        .col-offset-#{$size}-#{$i} {
          margin-left: #{(8.66666666667%*$i)};
        }
      }

      .col-no-margin-#{$size}-#{$i} {
        float: left;
        box-sizing: border-box;
        width: (math.div(100%, 12)*$i);
      }
    }

    .#{$size}-hidden {
      display: none !important;
    }

    .#{$size}-visible {
      display: block !important;
    }
  }
}

@each $name, $range in $width-ranges {
  .#{$name} {
    &.from {
      @include until(nth($range, 1)) {
        display: none !important;
      }
    }

    &.until {
      @include from(nth($range, 2)) {
        display: none !important;
      }
    }

    &.only {
      @include until(nth($range, 1)) {
        display: none !important;
      }

      @include from(nth($range, 2)) {
        display: none !important;
      }
    }
  }
}

.mobile {
  @include from($tablet) {
    display: none !important;
  }
}

.fullhd {
  @include until($fullhd) {
    display: none !important;
  }
}

.vertical-center {
  display: flex;
  align-items: center;
}

.horizontal-center {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

@mixin pull-right {
  display: inline-flex;
  text-align: right;
  justify-content: right;
  flex-grow: 1;
}

.pull-right {
  @include pull-right;
}

.hidden {
  display: none !important;
}

.no-content {
  display: flex;
  font-size: 1.5em;
  align-items: center;
  justify-content: center;
}

// Grid layout
.grid {
  width: 100%;
  display: grid;
  row-gap: 1em;
  column-gap: 1.5em;
  padding: 1em;

  @include until($tablet-small) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  @include between($tablet-small, $tablet) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @include between($tablet, $desktop) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @include between($desktop, $widescreen) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @include from($widescreen) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

