.nut-trendarrow {
  display: inline-flex;
  align-items: center;
  color: $color-title;
  font-size: $trendarrow-font-size;

  &-icon-before {
    margin-right: $trendarrow-icon-margin;
  }

  &-icon-after {
    margin-left: $trendarrow-icon-margin;
  }

  &-rate {
    vertical-align: middle;
    display: inline;
  }

  .nut-icon {
    vertical-align: middle;
  }
}
[dir='rtl'] .nut-trendarrow,
.nut-rtl .nut-trendarrow {
  &-icon-before {
    margin-right: 0;
    margin-left: $trendarrow-icon-margin;
  }

  &-icon-after {
    margin-left: 0;
    margin-right: $trendarrow-icon-margin;
  }
}