@import './variables';
@import '../breakpoints/mixins';
@import '../breakpoints/variables';
@import '../tokens/dynamic-rem';

//ignoring stylelint for now....this will be removed before pr
/* stylelint-disable unit-disallowed-list*/
/* Grid mixins */

@mixin validate-col-numbers($noOfCols) {
  @if not(type-of($noOfCols) == 'number') {
    @error 'Invalid col value type "#{type-of($noOfCols)}"';
  }
  @if ($noOfCols < 1 or $noOfCols > 12) {
    @error 'Invalid col value #{$noOfCols}, col number should be from 1 to 12';
  }
}

@mixin telia-grid {
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: dynamic-rem(#{$telia-fluid-breakpoint-xlarge});
  padding: 0 $page-padding;
  width: 100%;

  @include telia-breakpoint(md) {
    padding: 0 $page-padding-m;
  }
  @include telia-breakpoint(lg) {
    padding: 0 $page-padding-l;
  }
  @include telia-breakpoint(xl) {
    padding: 0 $page-padding-xl;
  }
}

@mixin telia-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin-left: calc(-1 * #{$gutter} / 2);
  margin-right: calc(-1 * #{$gutter} / 2);

  @include telia-breakpoint(md) {
    margin-left: calc(-1 * #{$gutter-medium} / 2);
    margin-right: calc(-1 * #{$gutter-medium} / 2);
  }
  @include telia-breakpoint(lg) {
    margin-left: calc(-1 * #{$gutter-large} / 2);
    margin-right: calc(-1 * #{$gutter-large} / 2);
  }
}

//noOfCols = the number of columns you want the column to be
@mixin telia-col($noOfCols: 1) {
  @include validate-col-numbers($noOfCols);
  box-sizing: border-box;
  display: block;
  padding-left: calc(#{$gutter} / 2);
  padding-right: calc(#{$gutter} / 2);
  width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});

  @include telia-breakpoint(md) {
    padding-left: calc(#{$gutter-medium} / 2);
    padding-right: calc(#{$gutter-medium} / 2);
  }
  @include telia-breakpoint(lg) {
    padding-left: calc(#{$gutter-large} / 2);
    padding-right: calc(#{$gutter-large} / 2);
  }
}

@mixin telia-col-md($noOfCols: 1) {
  @include telia-breakpoint(md) {
    @include validate-col-numbers($noOfCols);
    width: calc(((100% - 1px)  / #{$columns}) * #{$noOfCols});
  }
}

@mixin telia-col-lg($noOfCols: 1) {
  @include telia-breakpoint(lg) {
    @include validate-col-numbers($noOfCols);
    width: calc(((100% - 1px)  / #{$columns}) * #{$noOfCols});
  }
}

@mixin telia-grid-hide-up($breakpoint: null) {
  @if not map_has_key($breakpoints, $breakpoint) {
    @error 'Unknown breakpoint option "#{$breakpoint}"';
  } @else {
    @include telia-breakpoint($breakpoint) {
      display: none;
    }
  }
}

@mixin telia-grid-hide-down($breakpoint: null) {
  display: none;

  @if not map_has_key($breakpoints, $breakpoint) {
    @error 'Unknown breakpoint option "#{$breakpoint}"';
  } @else {
    @include telia-breakpoint($breakpoint) {
      display: block;
    }
  }
}
