Margin_Padding Mixin

$outer_margin_padding: (
  'x-small': 1,
  'small': 2,
  'medium': 3,
  'large': 4,
);

// Outside padding
@mixin padding-left-right(
  $padding_xs: null,
  $padding_sm: null,
  $padding_md: null,
  $padding_lg: null
) {

  @if ($padding_xs) {
    padding-left: $padding_xs + rem;
    padding-right: $padding_xs + rem;
  } @else {
    padding-left: map-get($outer_margin_padding, 'x-small') + rem;
    padding-right: map-get($outer_margin_padding, 'x-small') + rem;
  }

  @include respond-to('small') {
    @if ($padding_sm) {
      padding-left: $padding_sm + rem;
      padding-right: $padding_sm + rem;
    } @else {
      padding-left: map-get($outer_margin_padding, 'small') + rem;
      padding-right: map-get($outer_margin_padding, 'small') + rem;
    }
  }

  @include respond-to('medium') {
    @if ($padding_md) {
      padding-left: $padding_md + rem;
      padding-right: $padding_md + rem;
    } @else {
      padding-left: map-get($outer_margin_padding, 'medium') + rem;
      padding-right: map-get($outer_margin_padding, 'medium') + rem;
    }
  }

  @include respond-to('large') {
    @if ($padding_lg) {
      padding-left: $padding_lg + rem;
      padding-right: $padding_lg + rem;
    } @else {
      padding-left: map-get($outer_margin_padding, 'large') + rem;
      padding-right: map-get($outer_margin_padding, 'large') + rem;
    }
  }
}

// Outside margin
@mixin margin-left-right(
  $margin_xs: null,
  $margin_sm: null,
  $margin_md: null,
  $margin_lg: null
) {

  @if ($margin_xs) {
    margin-left: $margin_xs + rem;
    margin-right: $margin_xs + rem;
  } @else {
    margin-left: map-get($outer_margin_padding, 'x-small') + rem;
    margin-right: map-get($outer_margin_padding, 'x-small') + rem;
  }

  @include respond-to('small') {
    @if ($margin_sm) {
      margin-left: $margin_sm + rem;
      margin-right: $margin_sm + rem;
    } @else {
      margin-left: map-get($outer_margin_padding, 'small') + rem;
      margin-right: map-get($outer_margin_padding, 'small') + rem;
    }
  }

  @include respond-to('medium') {
    @if ($margin_md) {
      margin-left: $margin_md + rem;
      margin-right: $margin_md + rem;
    } @else {
      margin-left: map-get($outer_margin_padding, 'medium') + rem;
      margin-right: map-get($outer_margin_padding, 'medium') + rem;
    }
  }

  @include respond-to('large') {
    @if ($margin_lg) {
      margin-left: $margin_lg + rem;
      margin-right: $margin_lg + rem;
    } @else {
      margin-left: map-get($outer_margin_padding, 'large') + rem;
      margin-right: map-get($outer_margin_padding, 'large') + rem;
    }
  }
}