/**
 * 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.
 */

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

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

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

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

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

.royle {
  color: $royle;
}
.royle-bg {
  background-color: $royle;
}
.royle-border {
  border-color: $button-royle-border;
}

.pure {
  color: $pure;
}
.pure-bg {
  background-color: $pure;
}
.pure-border {
  border-color: $button-pure-border;
}

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

.subdued {
  color: $subdued;
}
.subdued-bg {
  background-color: $subdued;
}
.subdued-border {
  border-color: $button-subdued-border;
}

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

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


/**
 * Brand Colors
 * --------------------------------------------------
 * Brand colors are your brand's colors...override the defaults to 
 * your app's theme! Throughout Ionic's CSS we use brand-primary, 
 * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
 */

.primary {
  color: $primary;
}
.primary-bg {
  background-color: $primary;
}
.primary-border {
  border-color: $button-primary-border;
}

.secondary {
  color: $secondary;
}
.secondary-bg {
  background-color: $secondary;
}
.secondary-border {
  border-color: $button-secondary-border;
}

.tertiary {
  color: $tertiary;
}
.tertiary-bg {
  background-color: $tertiary;
}
.tertiary-border {
  border-color: $button-tertiary-border;
}