@import "../../primitives/Shared"

.HealthBar
  display: flex
  align-items: flex-end
  position: fixed
  bottom: 0
  width: 100%

.HealthBar-entry
  background-color: rgba(0, 0, 0, 0.5)
  overflow-x: hidden

  .HealthBar-entry-text
    padding: 2px
    font-size: 2.75vmax
    white-space: nowrap
    overflow-x: hidden

    &:first-child
      padding: 4px


.ProgressBar
  padding: 0.1vmax
  height: 1vmax
  opacity: 0.5
  box-sizing: border-box
  display: flex

  div
    height: 100%

  .ProgressBar-bg
    background-color: black

  .ProgressBar-inactive
    background-color: $blob-background

  .ProgressBar-level-5
    background-color: $red-3

    &.diff
      background-color: $red-6

  .ProgressBar-level-4
    background-color: $yellow-3

    &.diff
      background-color: $yellow-6

  .ProgressBar-level-3
    background-color: $green-3

    &.diff
      background-color: $green-6

  .ProgressBar-level-2
    background-color: $cyan-3

    &.diff
      background-color: $cyan-6

  .ProgressBar-level-1
    background-color: $blue-3

    &.diff
      background-color: $blue-6

  .ProgressBar-level-0
    background-color: $indigo-3

    &.diff
      background-color: $indigo-6