@import '../../mixins/index';

.healthScore {
  box-sizing: border-box;
  border-radius: 6px;
  font-weight: 600;

  display: flex;
  justify-content: center;
  align-items: center;

  &.small {
    &:hover {
      border: 1px solid chaser-color('Mid Neutral 2');
    }

    font-size: 13px;
    width: 32px;
    height: 32px;
    border: 1px solid chaser-color('Mid Neutral 3');

    &.healthy {
      color: chaser-color('Green');
    }

    &.average {
      color: chaser-color('Yellow');
    }

    &.unhealthy {
      color: chaser-color('Red');
    }

    &.NA {
      color: chaser-color('Mid Neutral 2');
    }
  }

  &.large {
    font-size: 40px;
    width: 90px;
    height: 92px;

    > div > div.text {
      font-size: 13px;
    }

    &.healthy {
      color: chaser-color('Green');
      background: rgba(chaser-color('Green'), 0.1);
    }

    &.average {
      color: chaser-color('Yellow');
      background: rgba(chaser-color('Yellow'), 0.1);
    }

    &.unhealthy {
      color: chaser-color('Red');
      background: rgba(chaser-color('Red'), 0.1);
    }

    &.NA {
      color: chaser-color('Mid Neutral 2');
      background: rgba(chaser-color('Mid Neutral 2'), 0.1);
    }
  }

  &.active {
    border: 1px solid chaser-color('Mid Neutral 2');
    background: chaser-color('Light Neutral 2');
  }
}

> svg {
  fill: none !important;
}