@use "sass:map";

// Set screen width breakpoints
$breakpoints: (
  mobile : 0px,
  tablet : 680px,
  desktop: 960px
);

// Mixin to print out media queries (based on map keys passed)
@mixin media($keys...) {
  @each $key in $keys {
    @media (min-width: map.get($breakpoints, $key)) {
      @content
    }
  }
}

// Generate col-<breakpoint>-<number> classes
$screen-size-to-breakpoint: (
  s:mobile,
  m:tablet,
  l:desktop
);

@for $i from 1 through 12 {
  @each $screen-size, $breakpoint in $screen-size-to-breakpoint {
    .col-#{$screen-size}-#{$i} {
      @media (min-width: map.get($breakpoints, $breakpoint)) {
        width: calc((100% / 12) * $i);
      }
    }
  }
}

.hidden {
  display: none !important;
}

@mixin from($key) {
  @media (min-width: map.get($breakpoints, $key)) {
    @content;
  }
}

@mixin until($key) {
  @media (max-width: #{map.get($breakpoints, $key) - 1}) {
    @content;
  }
}

.from.desktop {
  @include until(desktop) {
    display: none !important;
  }
}

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

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

.until.desktop {
  @include from(desktop) {
    display: none !important;
  }
}
