.badge {
  &::before {
    content: "\f058";
    position: absolute;
    font-size: 14px;
    padding: $gp / 4;
    width: 30px;
    height: 30px;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: var(--progress-text-color);
    background-color: var(--progress-primary-color);
    clip-path: polygon(0 0, 0 100%, 100% 0);
  }

  &.text,
  &.compact {
    &::before {
      font-size: 10px;
      padding: $gp / 6;
      width: 20px;
      height: 20px;
    }
  }

  &.grid {
    &::before {
      font-size: 20px;
      width: 40px;
      height: 40px;
    }
  }

  &.text {
    .game-info {
      a {
        padding-left: #{$gp / 2 + 12px};
      }
    }
  }
}