@use "src/styles/variables" as *;

.vm-dynamic-number {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 1em;
  font-size: $font-size-small;
  color: $color-text-disabled;

  &_static {
    color: $color-text-secondary;
    padding-left: 0;
  }

  &_positive {
    color: $color-success;
  }

  &_negative {
    color: $color-error;
  }

  &_warning {
    color: $color-warning;
  }

  &:before {
    position: absolute;
    top: auto;
    left: 0;
    width: 1em;
  }

  &_down {
    &:before {
      content: "↓ ";
    }
  }

  &_up {
    &:before {
      content: "↑ ";
    }
  }
}
