@import "../variables/breakpoints";
@import "../variables/effects";

.debug * {
  outline: 1px #f00 solid !important;
}

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

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

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

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

.u-display-c {
  display: contents;
}

.u-visibility-hidden {
  visibility: hidden;
}

.u-hide {
  display: none;
}

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

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

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

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

.u-min-width {
  min-width: 0;
}

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

.u-disabled {
  pointer-events: none;
  opacity: $opacity-50;
}

.u-off-screen {
  position: absolute;
  left: -9999em;
}

.u-overflow-auto {
  overflow: auto;
}

.u-overflow-hidden {
  overflow: hidden;
}

@media (min-width: $breakpoint-sm) {
  .u-show--inline\@sm {
    display: inline;
  }

  .u-show\@sm {
    display: block;
  }

  .u-hide\@sm {
    display: none;
  }
}

@media print {
  .u-no-print {
    display: none !important;
  }
}