// Borders
@function _border($element, $border-style, $border-color) {
  @return var(#{$element}-style, $border-style)
  var(#{$element}-color, $border-color);
}
// Use this mixin to set component border properties: width, style, color.
// width can set all position e.g. 0 0 1px 0 for bottom border only.
@mixin border($element, $border-width, $border-style, $border-color) {
  border: var(#{$element}, _border($element, $border-style, $border-color));
  border-width: var(#{$element}-width, $border-width);
}
// Use this mixin to set component background properties: color, image, position, size
@mixin background(
  $element,
  $color: transparent,
  $image: url(""),
  $position: 0% 0%,
  $size: cover
) {
  background: var(
                  #{$element},
                  var(#{$element}-image, $image) var(#{$element}-color, $color) no-repeat
                  var(#{$element}-position, $position)
  );
  background-size: var(#{$element}-size, $size);
}

@function _box-shadow(
  $element,
  $shadow-h-offset,
  $shadow-v-offset,
  $shadow-blur,
  $shadow-spread,
  $shadow-color
) {
  @return var(#{$element}-h-offset, $shadow-h-offset)
  var(#{$element}-v-offset, $shadow-v-offset)
  var(#{$element}-blur, $shadow-blur) var(#{$element}-spread, $shadow-spread)
  var(#{$element}-color, $shadow-color);
}

@mixin box-shadow(
  $element,
  $h-offset,
  $v-offset,
  $blur,
  $spread,
  $color,
) {
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: var(
                    #{$element}-transition,
                    opacity var(#{$element}-transition-opacity-duration, 200ms)
                    var(#{$element}-transition-opacity-timing-function, ease-in-out), box-shadow var(#{$element}-transition-box-shadow-duration, 200ms)
            var(#{$element}-transition-box-shadow-timing-function, ease-in-out)
    );
    opacity: var(#{$element}-opacity);
    box-shadow: var(#{$element}, _box-shadow($element, $h-offset, $v-offset, $blur, $spread, $color));
    will-change: opacity, box-shadow;
  }
}

// Try to use multiples of 5 when using pixels

// .m5 .mx5 .my5 .mt5 .mb5 .ml5 .mr5 - example classes for px margins
// .m5p .mx5p .my5p .mt5p .mb5p .ml5p .mr5p - example classes for % margins

// Pixels
$margin-px: 0 5 8 10 16 20 24 30 32 40 48 50;
$margin-x-px: 0 5 8 10 16 20 24 30 32 40 58 50;
$margin-y-px: 0 5 8 10 15 16 20 24 30 32 40 45 48 50;
$margin-top-px: 0 5 8 10 15 16 20 24 25 30 32 35 40 45 48 50 55 60 65 70 75 80 85 90 95 100;
$margin-bottom-px: 0 5 8 10 15 16 20 24 25 30 32 35 40 45 48 50 55 60 65 70 75 80 85 90 95 100;
$margin-left-px: 0 8 10 15 16 20 24 30 40;
$margin-right-px: 0 5 8 10 15 16 20 24 35;

// Percents
$margin-p: 5;
$margin-x-p: 5;
$margin-y-p: 5;
$margin-top-p: 5;
$margin-bottom-p: 5;
$margin-left-p: 5;
$margin-right-p: 5;

// Gutter
$gutterWidth: 32px;
.mg {
  margin: $gutterWidth;
}
.mbg {
  margin-bottom: $gutterWidth;
}
.mtg {
  margin-top: $gutterWidth;
}
.mrg {
  margin-right: $gutterWidth;
}
.mlg {
  margin-left: $gutterWidth;
}
.mxg {
  margin-left: $gutterWidth;
  margin-right: $gutterWidth;
}
.myg {
  margin-bottom: $gutterWidth;
  margin-top: $gutterWidth;
}

// Generators
@mixin margin {
  @each $i in $margin-px {
    .m#{$i} {
      margin: #{$i}px;
    }
  }
  @each $i in $margin-p {
    .m#{$i}p {
      margin: percentage($i/100);
    }
  }
  @each $i in $margin-x-px {
    .mx#{$i} {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
  }
  @each $i in $margin-x-p {
    .mx#{$i}p {
      margin-left: percentage($i/100);
      margin-right: percentage($i/100);
    }
  }
  @each $i in $margin-y-px {
    .my#{$i} {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
  }
  @each $i in $margin-y-p {
    .my#{$i}p {
      margin-top: percentage($i/100);
      margin-bottom: percentage($i/100);
    }
  }
  @each $i in $margin-top-px {
    .mt#{$i} {
      margin-top: #{$i}px!important;
    }
  }
  @each $i in $margin-top-p {
    .mt#{$i}p {
      margin-top: percentage($i/100);
    }
  }
  @each $i in $margin-bottom-px {
    .mb#{$i} {
      margin-bottom: #{$i}px;
    }
  }
  @each $i in $margin-bottom-p {
    .mb#{$i}p {
      margin-bottom: percentage($i/100);
    }
  }
  @each $i in $margin-left-px {
    .ml#{$i} {
      margin-left: #{$i}px;
    }
  }
  @each $i in $margin-left-p {
    .ml#{$i}p {
      margin-left: percentage($i/100);
    }
  }
  @each $i in $margin-right-px {
    .mr#{$i} {
      margin-right: #{$i}px;
    }
  }
  @each $i in $margin-right-p {
    .mr#{$i}p {
      margin-right: percentage($i/100);
    }
  }
}

@include margin;