.relative { position: relative; }
.static { position: static; }
.ib { display: inline-block; }
.block { display: block; }
.flex { display: flex; }

.pull-left { float: left; }
.pull-right { float: right; }

.marginless { margin: 0 !important; }
.paddingless { padding: 0 !important; }

.no-transition { transition: none !important; }
.no-transition-duration { transition-duration: 0ms !important; }

.height-inherit { height: inherit; }
.height-full { height: 100%; }
.no-min-height { min-height: 0; }

.width-inherit { width: inherit; }
.width-full { width: 100%; }
.no-min-width { min-width: 0; }

.grab { cursor: grab; }

.grab.grabbing,
.grabbing,
.grabbing .grab {
  cursor: grabbing;
}

.unselectable {
  user-select: none;
}

.flex-center {
  display: flex;
  align-items: center;
  height: 100%;
}

.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }

.clearfix { @include clearfix(); }
.fill-parent { @include fill-parent(); }

.fade {
  opacity: 0;
  transition: opacity .15s linear;

  &.in {
    opacity: 1;
  }
}

.background-image-cover {
  @include fill-parent();
  @include background-cover();
  width: 100%;
  height: 100%;
}

// Overflow hidden because polyfills will resize the image within.
.image-cover { overflow: hidden; }
.image-cover img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

// Place on an element (like the body) to prevent the mouse from scrolling it.
// This does not work for touch devices.
.no-overflow,
.no-scroll {
  overflow: hidden;
}

.off-screen {
  position: absolute !important;
  left: -9999px !important;
}

// Hide from both screenreaders and browsers: h5bp.com/u
.hidden {
  display: none !important;
  visibility: hidden;
}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// Hide visually and from screenreaders, but maintain layout
.invisible {
  visibility: hidden;
}

.unstyled-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.unstyled-button {
  padding: 0;
  background: none;
  border: 0;
}