.textreplace {
  display: block;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.textreplace-sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

%fullsize, .fullsize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

%defullsize {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

@mixin ib-whitespace-fix {
  font-size: 0;
  & > * {
    font-size: $base-font-size * 1px;
    display: inline-block;
    vertical-align: top;
  }
}

@mixin background-overlay($color, $position: before) {
  position: relative;
  &:#{$position} {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: $color;
    z-index: 1;
  }
}

@mixin reset-background-overlay {
  &:before {
    content: none;
  }
}

@mixin full-width-background-color($color) {
  position: relative;
  &:before {
    @include absolute-center;
    content: '';
    width: 100vw;
    height: 100%;
    background: $color;
    background-size: cover;
    z-index: -1;
  }
}

@mixin full-width-background-container($background-position: 50%) {
  @include absolute-center;
  z-index: 0;
  content: '';
  width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: $background-position;
}

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
}

@mixin remove-aspect-ratio() {
  position: relative;
  &:before {
    display: none;
  }
}

/*https://gist.github.com/terkel/4373420#gistcomment-1626534*/
@function decimal-round ($number, $digits: 0, $mode: round) {
  $n: 1;
  // $number must be a number
  @if type-of($number) != number {
      @warn '#{ $number } is not a number.';
      @return $number;
  }
  // $digits must be a unitless number
  @if type-of($digits) != number {
      @warn '#{ $digits } is not a number.';
      @return $number;
  } @else if not unitless($digits) {
      @warn '#{ $digits } has a unit.';
      @return $number;
  }
  @if $digits > 0 {
      @for $i from 1 through $digits {
          $n: $n * 10;
      }
  }
  @if $mode == round {
      @return round($number * $n) / $n;
  } @else if $mode == ceil {
      @return ceil($number * $n) / $n;
  } @else if $mode == floor {
      @return floor($number * $n) / $n;
  } @else {
      @warn '#{ $mode } is undefined keyword.';
      @return $number;
  }
}

@mixin columns($numCols, $gutter: 2em) {
  /* Stop IE from rounding number up */
  $roundPercentage: decimal-round((100% / $numCols), 1);
  @include safe-flexbox;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    width: 100%;
    flex-shrink: 0;
    width: calc(#{$roundPercentage} - #{$gutter / $numCols * ($numCols - 1)});
    margin-right: $gutter;
    margin-bottom: 0;
    @for $i from 1 through 16 {
      $n: #{$i}#{"n+"}#{$i}; // this is dumb
      &:nth-child(#{$n}) {
        @if($i == $numCols) {
          margin-right: 0;
        }
        @elseif($i < $numCols) {
          margin-right: $gutter;
        }
      }
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

@mixin safe-flexbox {
  display: flex;
  > * {
    -ms-flex: 0 1 auto;
  }
}

@mixin safe-inline-flexbox {
  display: inline-flex;
  > * {
    -ms-flex: 0 1 auto;
  }
}

@mixin absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin absolute-center--horizontal {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@mixin absolute-center--vertical {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

@mixin reset-absolute-center {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

@mixin fullscreen {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
}

@function em($pixels, $dens: 1) {
  @return $pixels / $base-font-size / $dens * 1em;
}

@function rem($pixels, $dens: 1) {
  @return $pixels / $base-font-size / $dens * 1rem;
}

@function em2rem($em) {
  @return deunit($em) * 1rem;
}

@function rem2em($rem) {
  @return deunit($rem) * 1em;
}

@function deunit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin font-legibility {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin visibility--hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

@mixin visibility--visible {
  visibility: visible;
  pointer-events: visible;
  opacity: 1;
}

@mixin input--hidden {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

@mixin truncate-text($width) {
  width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin buttonStyles($bg, $text, $border) {
  background-color: $bg;
  color: $text;
  border: $border;
}
