@import '../settings/variables';

.c-delta {
  $icon-size: 0.4em;

  &:before {
    content: '';
    display: inline-block;
  }

  &--higher:before,
  &--lower:before,
  &--equal:before,
  &--equal-orange:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-radius: 0.2em;
  }

  &--higher:before {
    border-color: transparent transparent $color-increase transparent;
    border-width: 0 $icon-size $icon-size $icon-size;
  }

  &--lower:before {
    border-color: $color-negative transparent transparent transparent;
    border-width: $icon-size $icon-size 0 $icon-size;
  }

  &--equal {
    padding-left: $margin-tiny;
  }

  &--equal:before {
    border-color: transparent transparent transparent $color-paragraph-light;
    border-width: $icon-size 0 $icon-size $icon-size;
    margin-top: 0.2em;
  }

  &--equal-orange:before {
    border-color: transparent transparent transparent $color-selected;
    border-width: $icon-size 0 $icon-size $icon-size;
    margin-top: 0.2em;
  }
}