@mixin clearfix {
  &:before,
  &:after {
    display: table;
    content: " ";
  }

  &:after {
    clear: both;
  }
}

@mixin clipText($maxLines: 1) {
  overflow: hidden;
  @if ($maxLines == 1) {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @else {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $maxLines;
  }
}

@mixin hideText {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
}

@mixin fontColor($color) {
  color: $color;
  a {
    color: inherit;
  }
}

@mixin iosRoundCorner($reference: null) {
  @if ($reference) {
    border-radius: ($reference/6.4)
  } @else {
    border-radius: percentage(1/6.4);
  }
}

@mixin imgWrapper($ratio: null, $bg: silver) {
  display: block;
  background-color: $bg;

  > img {
    display: block;
    max-width: 100%;
  }

  @if ($ratio) {
    height: 0;
    padding-bottom: $ratio;
    overflow: hidden;

    > img {
      width: 100%;
    }
  }
}

@mixin center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

@mixin circle($size: null) {
  border-radius: 50%;

  @if ($size != null) {
    width: $size;
    height: $size;
  }
}

@mixin allowScroll($direction: 'y') {
  @if ($direction == 'y') {
    overflow-x: hidden;
    overflow-y: auto;
  }

  @else if ($direction == 'x') {
    overflow-x: auto;
    overflow-y: hidden;
  }

  @else if ($direction == 'all') {
    overflow: auto;
  }

  -webkit-overflow-scrolling: touch;
}

@mixin respondTo_hoverable() {
  @media not all and (hover: none) {
    &:hover {
      @content;
    }
  }
}