$gutter: 8px;

@mixin padding($index) {
  padding: $index * $gutter;
}

@mixin padding-top($index) {
  padding-top: $index * $gutter;
}

@mixin padding-bottom($index) {
  padding-bottom: $index * $gutter;
}

@mixin padding-left($index) {
  padding-left: $index * $gutter;
}

@mixin padding-right($index) {
  padding-right: $index * $gutter;
}

@mixin padding-horizontal($index) {
  @include padding-left($index);
  @include padding-right($index);
}

@mixin padding-vertical($index) {
  @include padding-top($index);
  @include padding-bottom($index);
}

@mixin no-padding() {
  padding: 0 !important;
}

@mixin no-padding-horizontal() {
  padding-left: 0;
  padding-right: 0;
}

@mixin no-padding-vertical() {
  padding-top: 0;
  padding-bottom: 0;
}