@import "./scss/variable.scss";

#{$wnumber-prefix} {
  font-family: $font-family;
  font-size: $font-size-l;
  line-height: 1;
  color: $color-1;

  #{$wnumber-prefix}-main {
    position: relative;
    &.drop {
      color: $red;
    }
    &.raise {
      color: $normal;
    }
    &.normal{
      color: $normal;
    }
    &.blue {
      color: $blue;
    }
    &.green {
      color: $green;
    }
    &.orange {
      color: $orange;
    }
    &.red {
      color: $red;
    }

    #{$wnumber-prefix}-leftIcon, #{$wnumber-prefix}-rightRatioIcon {
      position:relative;
      margin-right: $size-half;

      >.drop {
        color: $red;
      }
      >.raise {
        color: $normal;
      }
    }
    #{$wnumber-prefix}-unit {
      margin-left: $size-1;
      font-size: $font-size-s;
    }

    #{$wnumber-prefix}-rightTitle {
      margin-left: $size-1;
      font-size: $font-size-s;
      color: $color-2;
    }

    #{$wnumber-prefix}-rightRatio {
      position: absolute;
      right: 0;
      top: 12px;
      font-size: $font-size-m;
      color: $color-2;

      &.drop {
        color: $red;
      }
      &.raise {
        color: $normal;
      }
      &.normal{
        color: $normal;
      }
      &.blue {
        color: $blue;
      }
      &.green {
        color: $green;
      }
      &.orange {
        color: $orange;
      }
      &.red {
        color: $red;
      }
    }

    #{$wnumber-prefix}-trend {
      margin-left: $size-2;
    }
  }
  #{$wnumber-prefix}-bottomTitle {
    font-size: $font-size-s;
    margin-top: $size-1;
    color: $color-2;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}