.hui-DeltaArrow--unknown,
.hui-DeltaArrow--up,
.hui-DeltaArrow--down,
.hui-DeltaArrow--loading,
.hui-DeltaArrow--emptyState {
  @extend %general-reset;
  width: 43px;
  height: 37px;
  position: relative;
  display: inline-block;

  svg {
    width: 43px;
    height: 37px;
  }
}

.hui-DeltaArrow__value {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: white;
}

.hui-DeltaArrow--loading,
.hui-DeltaArrow--emptyState {
  svg {
    fill: $grey-lighter;
  }
}

.hui-DeltaArrow--unknown {
  svg {
    fill: $grey-lighter;
  }
  .hui-DeltaArrow__value {
    bottom: $x-1;
  }
}

.hui-DeltaArrow--up {
  svg {
    fill: $green-light;
  }
  .hui-DeltaArrow__value {
    bottom: $x-1;
  }
}

.hui-DeltaArrow--down {
  svg {
    fill: $error;
  }
  .hui-DeltaArrow__value {
    top: $x-1;
  }
}