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

.hide {
  display: none;
}
.opacity-hide {
  opacity: 0;
}
.grade-b .opacity-hide,
.grade-c .opacity-hide {
  opacity: 1;
  display: none;
}
.show {
  display: block;
}
.opacity-show {
  opacity: 1;
}
.invisible {
  visibility: hidden;
}

.keyboard-open .hide-on-keyboard-open {
  display: none;
}

.keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
.keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
  bottom: 0;
}

.inline {
  display: inline-block;
}

.disable-pointer-events {
  pointer-events: none;
}

.enable-pointer-events {
  pointer-events: auto;
}

.disable-user-behavior {
  // used to prevent the browser from doing its native behavior. this doesnt
  // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc

  @include user-select(none);
  @include touch-callout(none);
  @include tap-highlight-transparent();

  -webkit-user-drag: none;

  -ms-touch-action: none;
  -ms-content-zooming: none;
}

// Fill the screen to block clicks (a better pointer-events: none) for the body
// to avoid full-page reflows and paints which can cause flickers
.click-block {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-click-block;
  width: 100%;
  height: 100%;
  opacity: 0;
  @include translate3d(0, 0, 0);
}
.click-block-hide {
  @include translate3d(-9999px, 0, 0);
}

.no-resize {
  resize: none;
}

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

.full-image {
  width: 100%;
}

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

/**
 * 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;
}