@import "constants";

@mixin horizontal-padding($value) {
  padding-left: $value;
  padding-right: $value;
}

@mixin vertical-padding($value) {
  padding-top: $value;
  padding-bottom: $value;
}

// due to issues that won't be fixed in ie11 regarding images and flex
// https://connect.microsoft.com/IE/Feedback/Details/1218984
// we are obliged to use a background-image
@mixin ie-compatible-background-image($image-url: false) {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;

  @if $image-url {
    background-image: image-url($image-url);
  }
}