.easy-trend{
  @extend %clearfix;
  &__data{
    font-size: 2em;
    vertical-align: middle;
  }
  &__percent{
    padding-left: 15%;
    font-size: medium;
  }
  &__options_compare_query{
    padding-top: 10px;
  }
  &__wrapper{
    padding: $gap 0;
    //text-align: center;
  }
  &__icon + &__wrapper{
    float: right;
    width: 75%;
    //border-left: 1px solid rgba($color-border,.1);
    .easy-trend{
      &__data,&__description{
        margin-left: $box-padding;
       // text-align: left;
      }
    }
  }
  &__icon{
    font-size: 4em;
    float: left;
    text-align: center;
    width: 25%;
  }
  &__direction{
    &--up{
      @include triangle-top($gap, $color-positive, $color-foreground, 0, 1.25);
    }
    &--down{
      @include triangle-bottom($gap, $color-negative, $color-foreground, 0, 1.25);
    }
    &--stagnant{

    }
    &:before,&:after{
      bottom: $gap;
    }
    &:after{
      @include transform(scale(.8) translateY(-1px));
    }
  }

}