/* stylelint-disable */
@import './constants.less';

.media(@span, @content) when (@span = xxl) {
  @media only screen and (min-width: 1600px) {
    @content();
  }
}
.media(@span, @content) when (@span = xx) {
  @media only screen and (min-width: 1400px) {
    @content();
  }
}
.media(@span, @content) when (@span = xl) {
  @media only screen and (min-width: 1200px) {
    @content();
  }
}
.media(@span, @content) when (@span = lg) {
  @media only screen and (min-width: 992px) {
    @content();
  }
}
.media(@span, @content) when (@span = md) {
  @media only screen and (min-width: 768px) {
    @content();
  }
}
.media(@span, @content) when (@span = sm) {
  @media only screen and (min-width: 576px) {
    @content();
  }
}
.media(@span, @content) when (@span = xs) {
  @media only screen and (max-width: 576px) {
    @content();
  }
}

.media-other(@span, @content) when (@span = xxl) {
  .media(xs, @content);
  .media(sm, @content);
  .media(md, @content);
  .media(lg, @content);
  .media(xl, @content);
  .media(xx, @content);
}
.media-other(@span, @content) when (@span = xx) {
  .media(xs, @content);
  .media(sm, @content);
  .media(md, @content);
  .media(lg, @content);
  .media(xl, @content);
}
.media-other(@span, @content) when (@span = xl) {
  .media(xs, @content);
  .media(sm, @content);
  .media(md, @content);
  .media(lg, @content);
}
.media-other(@span, @content) when (@span = lg) {
  .media(xs, @content);
  .media(sm, @content);
  .media(md, @content);
}
.media-other(@span, @content) when (@span = md) {
  .media(xs, @content);
  .media(sm, @content);
}
.media-other(@span, @content) when (@span = sm) {
  .media(xs, @content);
}

.keyframes(@name, @content) {
  @keyframes @name {
    @content();
  }
  @keyframes @name {
    @content();
  }
  @keyframes @name {
    @content();
  }
  @keyframes @name {
    @content();
  }
}

.font-size(@size) when (@size >= @min-font-size + 4) {
  .media(xs, {
    font-size: @size - 4,
  });
  .media(sm, {
    font-size: @size - 4,
  });
}
.font-size(@size) when (@size >= @min-font-size + 2) {
  .media(md, {
    font-size: @size - 2,
  });
  .media(lg, {
    font-size: @size - 2,
  });
  .media(xl, {
    font-size: @size - 2,
  });
}
.font-size(@size) when (@size >= @min-font-size) {
  .media(xx, {
    font-size: @size;
  });
}
.font-size(@size) when (@size >= @min-font-size - 2) {
  .media(xxl, {
    font-size: @size + 2,
  });
}
.font-size(@size) {
  font-size: @min-font-size;
  transition-duration: 0.3s;
  transition-property: font-size;
}

.min-border-position(@position) when (@position = top) {
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
}
.min-border-position(@position) when (@position = right) {
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
}
.min-border-position(@position) when (@position = bottom) {
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
}
.min-border-position(@position) when (@position = left) {
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
}

.min-border-before(@position, @color, @content) {
  &::before {
    position: absolute;
    z-index: 1;
    background-color: @color;
    content: '';
    .min-border-position(@position);
    @content();
  }
}
.min-border-before(@position, @color) {
  .min-border-before(@position, @color, {});
}
.min-border-after(@position, @color, @content) {
  &::after {
    position: absolute;
    z-index: 1;
    background-color: @color;
    content: '';
    .min-border-position(@position);
    @content();
  }
}
.min-border-after(@position, @color) {
  .min-border-after(@position, @color, {});
}

.required() {
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    color: @light-red;
    font-family: SimSun, sans-serif;
    content: '*';
    .font-size(@font-size);
    .media(xxl, {
      top: 2.5px,
    });
  }
}

.ant-required() {
  &::before {
    display: inline-block;
    margin-right: 4px;
    color: @light-red;
    .font-size(@font-size);

    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
}

.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.absolute(@top: 0, @right: 0, @bottom: 0, @left: 0) {
  position: absolute;
  top: @bottom;
  right: @right;
  bottom: @left;
  left: @top;
}

.flex(@flex, @align-items, @justify-content) {
  display: flex;
  flex: 0 0 @flex;
  align-items: @align-items;
  justify-content: @justify-content;
}