/**
 * Utility Classes
 * --------------------------------------------------
 */

.hidden, 
.hide { 
  display: none !important; 
}
.show {
  display: block !important;
}

.inline {
  display: inline-block;
}

.block {
  display: block;
  clear: both;
  &:after { 
    display: block; 
    visibility: hidden; 
    clear: both; 
    height: 0;
    content: ".";
  }
}

.full-image {
  width: 100%;
}


/**
 * Content Padding
 * --------------------------------------------------
 */

.padding {
  padding: $content-padding;
}

.padding-top,
.padding-vertical {
  padding-top: $content-padding;
}

.padding-right,
.padding-horizontal {
  padding-right: $content-padding;
}

.padding-bottom,
.padding-vertical {
  padding-bottom: $content-padding;
}

.padding-left,
.padding-horizontal {
  padding-left: $content-padding;
}


/**
 * Rounded
 * --------------------------------------------------
 */

.rounded {
  border-radius: $border-radius-base;
}


/**
 * Utility Colors
 * --------------------------------------------------
 * Utility colors are added to help set a naming convention. You'll 
 * notice we purposely do not use words like "red" or "blue", but 
 * instead have colors which represent an emotion or generic theme.
 */

.light, a.light {
  color: $light;
}
.light-bg {
  background-color: $light;
}
.light-border {
  border-color: $button-light-border;
}

.stable, a.stable {
  color: $stable;
}
.stable-bg {
  background-color: $stable;
}
.stable-border {
  border-color: $button-stable-border;
}

.positive, a.positive {
  color: $positive;
}
.positive-bg {
  background-color: $positive;
}
.positive-border {
  border-color: $button-positive-border;
}

.calm, a.calm {
  color: $calm;
}
.calm-bg {
  background-color: $calm;
}
.calm-border {
  border-color: $button-calm-border;
}

.assertive, a.assertive {
  color: $assertive;
}
.assertive-bg {
  background-color: $assertive;
}
.assertive-border {
  border-color: $button-assertive-border;
}

.balanced, a.balanced {
  color: $balanced;
}
.balanced-bg {
  background-color: $balanced;
}
.balanced-border {
  border-color: $button-balanced-border;
}

.energized, a.energized {
  color: $energized;
}
.energized-bg {
  background-color: $energized;
}
.energized-border {
  border-color: $button-energized-border;
}

.royal, a.royal {
  color: $royal;
}
.royal-bg {
  background-color: $royal;
}
.royal-border {
  border-color: $button-royal-border;
}

.dark, a.dark {
  color: $dark;
}
.dark-bg {
  background-color: $dark;
}
.dark-border {
  border-color: $button-dark-border;
}