@import '../../vars.less';

@colorUp: #31D4D5;
@colorDown: #FF704E;

.trendWrap {
  display: flex;
  align-items: center;
}
.trendIcon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  margin-left: 10px;
}
.trendDown, .trendUp {
  font-size: 16px;
  font-family: Rubik;
  font-weight: 400;
}
.trendDown {
  .trendNum {
    color: @colorDown;
  }
}
.trendUp {
  .trendNum {
    color: @colorUp;
  }
}
.trendWithBorder.trendDown .trendData{
   border-top: 1px solid @colorDown;
}
.trendWithBorder.trendUp .trendData{
  border-top: 1px solid @colorUp;
}

.trendData {
  display: flex;
  justify-content: center;
  align-items: center;
}

.trendWrapRow {
  flex-direction: column;
}
.trendTitle {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
}

.trendWrapNormal {
  .trendTitle {
    font-size: @normal-font-2;
  }
  .trendIcon {
    width: 22px;
    height: 22px;
  }
  .trendNum {
    font-size: @normal-font-2;
  }
}
