@import "sass-zero/variables";
@import "sass-zero/mixins";

.u-position {
  position: absolute !important;

  &--right {
    right: 0 !important;
  }

  &--left {
    left: 0 !important;
  }

  &--bottom {
    bottom: 0 !important;
  }

  &--top {
    top: 0 !important;
  }
}

.u-position-context {
  position: relative !important;
}

.u-clearfix {
  @include clearfix;
}

.u-full-width {
  width: 100% !important;
}

.u-unscrollable {
  overflow: hidden !important;
}

.u-display-i {
  display: inline !important;
}

.u-display-b {
  display: block !important;
}

.u-display-ib {
  display: inline-block !important;
}

.u-display-n {
  display: none !important;
}

.u-pointer-events-n {
  pointer-events: none !important;
}

.u-margin-centered {
  @include center-block;
}

@media (min-width: $breakpoint-md) {
  .u-wrap-on-desktop {
    display: block !important;
  }
}

@media (max-width: $breakpoint-md - 1) {
  .u-wrap-on-mobile {
    display: block !important;
  }
}

.u-nowrap {
  white-space: nowrap !important;
}

.u-float-l {
  float: left !important;
}

.u-float-r {
  float: right !important;
}

.u-float-n {
  float: none !important;
}

.u-float-clear {
  clear: both !important;
}

.u-float-clear-l {
  clear: left !important;
}

.u-float-clear-r {
  clear: right !important;
}

@media (max-width: $breakpoint-md - 1) {
  .u-float-n-on-mobile {
    float: none !important;
  }
}

.u-hide {
  display: none !important;
}

.u-hide-focus {
  outline: none !important;
}

@media (max-width: $breakpoint-md - 1) {
  .u-hide-on-media-small {
    display: none !important;
  }
}

@media (min-width: $breakpoint-md) {
  .u-hide-on-media-medium {
    display: none !important;
  }
}