@import (reference) "../../../assets/css/index";

.trend-item {
  display: inline-block;
  font-size: @trend-title-font-size-sm;
  line-height: @trend-title-line-height-sm;

  .up,
  .down {
    position: relative;
    display: inline-block;
    top: 1px;
    margin-left: 1px;
    font-size: 12px;
    transform: scale(0.8333);

    i {
      transform: scale(0.6, 0.8);
    }
  }
  .up {
    color: @assistant-danger;
  }
  .down {
    color: @assistant-success;
    // top: -1px;
  }

  &.trend-item-grey .up,
  &.trend-item-grey .down {
    color: @text-color;
  }

  &.reverse-color .up {
    color: @assistant-success;
  }
  &.reverse-color .down {
    color: @assistant-danger;
  }

  &.normal {
    font-size: @trend-title-font-size;
    line-height: @trend-title-line-height;

    .up,
    .down {
      font-size: 12px;
      transform: scale(1);

      i {
        transform: scale(0.6667, 0.8333);
      }
    }
  }

  &.large {
    font-size: @trend-title-font-size-lg;
    line-height: @trend-title-line-height-lg;

    .up,
    .down {
      font-size: 20px;
      transform: scale(1);

      i {
        transform: scale(0.6, 0.8);
      }
    }
  }
}