@mixin bg($name, $width: 100%, $height: 100%, $contain: contain) {
  background-image: url('#{$assetsPath}#{$name}');
  background-size: $width $height;
  background-repeat: no-repeat;
  background-size: $contain;
}

// fix for 1px problem
@mixin b-b-1($color) {
  box-shadow: 0px 0px 1px 0px $color inset;
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin no-scrollbar() {
  &::-webkit-scrollbar {
    display:none;
    width: 0 !important;
  }

  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  -webkit-overflow-scrolling: touch;
}

@mixin ellipse-1($width: 200px) {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  max-width: $width;
}

@mixin ellipse($line: 2) {
  & {
    position: relative;
    line-height: 1.5em;
    height: $line * 1.5em;
    overflow: hidden;

    .expand {
      position:absolute;
      bottom:0;
      right:0;
      padding: 0 5px;
      background-color: $primary-color;
      font-size: r(24);
      color: $text-color-secondary;
    }
  }
}