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

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

.u-position-right {
  position: absolute;
  right: 0;
}

.u-position-left {
  position: absolute;
  left: 0;
}

.u-position--bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.u-position--top-right {
  position: absolute;
  top: 0;
  right: 0;
}

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

.u-unscrollable {
  overflow: hidden;
}

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

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

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

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

.u-centered {
  margin-right: auto;
  margin-left: auto;
}

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

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

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

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

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

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

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

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

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

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

.u-hide {
  display: none;
}

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

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

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