@mixin gradient($start, $end) {
  background-color: $start;
  background: linear-gradient(to top, $start 0%, $end 100%);
}
@mixin gradient-vertical($start, $end) {
  background-color: $start;
  background: linear-gradient(to bottom, $start 0%, $end 100%);
}

@mixin horizontal-gradient($start, $end) {
  background-color: $start;
  background: linear-gradient(to left, $start 0%, $end 100%);
}

@mixin transform($x, $y) {
  transform: translate($x, $y);
}

@mixin transform-important($x, $y) {
  transform: translate($x, $y) !important;
}

@mixin ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  max-width: 100%;
}

.ellipsis {
  @include ellipsis;
}

@mixin ellipsis-row($row) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}

@mixin and-width($n, $i: 1) {
  @if $i <= $n {
    &.#{$width}-#{$i} {
      width: (($layout-width/$layout-steps)*$i) + $layout-unit;
    }
    @include and-width($n, ($i + 1));
  }
}

@mixin and-height($n, $i: 1) {
  @if $i <= $n {
    &.#{$height}-#{$i} {
      height: (($layout-height/$layout-steps)*$i) + $layout-unit;
    }
    @include and-height($n, ($i + 1));
  }
}