// Spacing
// --------------------------------------------------------------------------

@each $property in ( margin, padding ) {
  @each $name, $value in $spacing-values {
    .#{$property}-#{$name} {
      #{$property}: #{$value};
    }

    .#{$property}Top-#{$name} {
      #{$property}-top: #{$value};
    }

    .#{$property}Bottom-#{$name} {
      #{$property}-bottom: #{$value};
    }

    .#{$property}Left-#{$name} {
      #{$property}-left: #{$value};
    }

    .#{$property}Right-#{$name} {
      #{$property}-right: #{$value};
    }

    .#{$property}Horizontal-#{$name} {
      #{$property}-left: #{$value};
      #{$property}-right: #{$value};
    }

    .#{$property}Vertical-#{$name} {
      #{$property}-bottom: #{$value};
      #{$property}-top: #{$value};
    }
  }
}

.margin-auto {
  margin: auto;
}

.marginHorizontal-auto {
  margin-left: auto;
  margin-right: auto;
}

// Overflow
// --------------------------------------------------------------------------

.overflow-visible {
  overflow: visible;
}

.overflowX-visible {
  overflow-x: visible;
}

.overflowY-visible {
  overflow-y: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflowX-hidden {
  overflow-x: hidden;
}

.overflowY-hidden {
  overflow-y: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflowX-scroll {
  overflow-x: scroll;
}

.overflowY-scroll {
  overflow-y: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflowX-auto {
  overflow-x: auto;
}

.overflowY-auto {
  overflow-y: auto;
}

.overflow-inherit {
  overflow: inherit;
}

.overflowX-inherit {
  overflow-x: inherit;
}

.overflowY-inherit {
  overflow-y: inherit;
}

.overflow-initial {
  overflow: initial;
}

.overflowX-initial {
  overflow-x: initial;
}

.overflowY-initial {
  overflow-y: initial;
}

.overflow-unset {
  overflow: unset;
}

.overflowX-unset {
  overflow-x: unset;
}

.overflowY-unset {
  overflow-y: unset;
}