/*------------------------------------------------------------------
[TABLE OF CONTENTS]

=> font
=> anim
=> transform
=> border radius
=> flex
=> ellipsis
=> image
=> box-shadow

-------------------------------------------------------------------*/

/*==========================================================================
=> font
==========================================================================*/
.font (@color, @font-size, @font-weight: 400) {
  color: @color;
  font-size: @font-size;
  font-weight: @font-weight;
}

/*==========================================================================
=> anim
==========================================================================*/
.anim(@s: 0.2s) {
  transition: all @s ease-in-out;
  -webkit-transition: all @s ease-in-out;
}

/*==========================================================================
=> transform
==========================================================================*/
.trf-t (@x, @y) {
  -webkit-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

.trf-r (@angle) {
  -webkit-transform: rotate(@angle);
  transform: rotate(@angle);
}

.trf-s (@x, @y) {
  -webkit-transform: scale(@x, @y);
  transform: scale(@x, @y);
}

/*==========================================================================
=> border radius
==========================================================================*/
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

/*==========================================================================
=> flex
==========================================================================*/
.flex(@jc: center, @ai: center) {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: @jc;
  align-items: @ai;
}

/*==========================================================================
=> ellipsis
==========================================================================*/
.ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsisV(@clamp: 2) {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: @clamp;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*==========================================================================
=> image
==========================================================================*/
.img-cir(@siz) {
  width: @siz;
  height: @siz;
  overflow: hidden;
  border-radius: 50%;
  margin: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-width(@siz: 100%) {
  width: @siz;
  overflow: hidden;
  margin: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-h(@height) {
  height: @height;
  width: 100%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-wh(@width, @hight) {
  width: @width;
  height: @hight;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-auto(@pt: 56%) {
  height: 0;
  padding-top: @pt;
  position: relative;
  overflow: hidden;

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*==========================================================================
=> box-shadow
==========================================================================*/
.box-shadow(@top: 0, @left: 0, @blur: 20px, @color: rgba(0, 0, 0, 0.2)) {
  -webkit-box-shadow: @top @left @blur @color;
  -moz-box-shadow: @top @left @blur @color;
  box-shadow: @top @left @blur @color;
}

.contain() {
  img {
    object-fit: contain;
  }
}