@import 'helper-classes';

$breakpoints: (
  bp--xs--major: 500px,
  bp--sm--major: 768px,
  bp--md--major: 992px,
  bp--lg--major: 1200px
);

$padding: (
  'mobile': 3%,
  'xs': 5%
);

@function padding($value) {
  @if map-has-key($padding, $value) {
    @return map-get($padding, $value);
  } @else {
    @warn 'padding: could not find #{$value} in $padding map. Please make sure it is defined';
  }
}

//-------------------------------------
// @mixin: breakpoint($size)
//-------------------------------------
// usage:
// @include breakpoint(bp--md--major) {
//    - styles here --
// }
//-------------------------------------

@mixin breakpoint($size) {
  @if map-has-key($breakpoints, $size) {
    @media screen and (min-width: map-get($breakpoints, $size)) {
      @content;
    }
  } @else {
    @media (min-width: $size) {
      @content;
    }
  }
}

//-------------------------------------
// @mixin: grid-container
//-------------------------------------
// usage:
// .some-container {
//   @include grid-container;
// }
//-------------------------------------

@mixin grid-container {
  width: 100%;
  padding-right: padding(mobile);
  padding-left: padding(mobile);

  @include breakpoint(bp--xs--major) {
    padding-right: padding(xs);
    padding-left: padding(xs);
  }
}

$z-indexes: (
  modal: 9000,
  overlay: 8000,
  dropdown: 7000,
  header: 6000,
  footer: 5000,
  hidden: - 1,
  overflowHidden: - 1,
  floating: 10000
);

//-------------------------------------
// @function: z($layer)
//-------------------------------------
// usage:
// .modal {
//   z-index: z('modal');
// }
//-------------------------------------

@function z($layer) {
  @if not map-has-key($z-indexes, $layer) {
    @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
  }

  @return map-get($z-indexes, $layer);
}