$padding-base-vertical:          6px;
$padding-base-horizontal:        9px;

$padding-large-vertical:         10px;
$padding-large-horizontal:       15px;

$padding-small-vertical:         4px;
$padding-small-horizontal:       6px;

$padding-xs-vertical:            1px;
$padding-xs-horizontal:          3px;

$legend-border-color:            #e5e5e5;


.spacing {
  margin-top: $padding-base-vertical;
  margin-bottom: $padding-base-vertical;
}

.spacing-sm {
  margin-top: $padding-small-vertical;
  margin-bottom: $padding-small-vertical;
}

.spacing-lg {
  margin-top: $padding-large-vertical;
  margin-bottom: $padding-large-vertical;
}

.row {
  &.row-space {
    margin-top: $padding-base-vertical;
    margin-bottom: $padding-base-vertical;
  }

  &.row-space-sm {
    margin-top: $padding-small-vertical;
    margin-bottom: $padding-small-vertical;
  }

  &.row-space-lg {
    margin-top: $padding-large-vertical;
    margin-bottom: $padding-large-vertical;
  }
  &.row-space-top{
    margin-top: $padding-base-vertical;
  }
  &.row-space-bottom{
    margin-bottom: $padding-base-vertical;
  }
}

section {
  &.section-space {
    margin-top: $padding-base-vertical;
  }

  &.section-space-sm {
    margin-top: $padding-small-vertical;
  }

  &.section-space-lg {
    margin-top: $padding-large-vertical;
  }

  & + &.section-separator {
    border-top: 1px solid $legend-border-color;
  }

  &.section-separator-solo {
    border-top: 1px solid $legend-border-color;
    border-bottom: 1px solid $legend-border-color;
  }

  &.section-space-bottom{
    margin-bottom: $padding-base-vertical;
  }
  &.section-space-bottom-sm{
    margin-bottom: $padding-small-vertical;
  }
  &.section-space-bottom-lg{
    margin-bottom: $padding-large-vertical;
  }

  &.section-pad-top {
    padding-top: $padding-base-vertical;
  }
  &.section-pad-bottom {
    padding-bottom: $padding-base-vertical;
  }
  &.section-pad-top-sm {
    padding-top: $padding-small-vertical;
  }
  &.section-pad-bottom-sm {
    padding-bottom: $padding-small-vertical;
  }
  &.section-pad-top-lg {
    padding-top: $padding-large-vertical;
  }
  &.section-pad-bottom-lg {
    padding-bottom: $padding-large-vertical;
  }
}