.UncapStar {
  $size: 18px;

  @media (max-width: $tablet) {
    $size: 12px;
  }

  background-repeat: no-repeat;
  background-size: $size;
  display: block;
  height: $size;
  width: $size;

  @media (min-width: $laptop) {
    &:hover {
      transform: scale(1.2);
    }
  }

  &.empty,
  &.empty.mlb,
  &.empty.flb,
  &.empty.ulb,
  &.empty.special {
    background-image: url('/icons/uncap/empty.svg');

    &:hover {
      background-image: url('/icons/uncap/empty-hover.svg');
    }
  }

  &.mlb {
    background-image: url('/icons/uncap/yellow.svg');

    &:hover {
      background-image: url('/icons/uncap/yellow-hover.svg');
    }
  }

  &.special {
    background-image: url('/icons/uncap/red.svg');

    &:hover {
      background: url('/icons/uncap/red-hover.svg');
    }
  }

  &.flb {
    background-image: url('/icons/uncap/blue.svg');

    &:hover {
      background: url('/icons/uncap/blue-hover.svg');
    }
  }

  &.ulb {
    background-image: url('/icons/uncap/purple.svg');

    &:hover {
      background-image: url('/icons/uncap/purple-hover.svg');
    }
  }
}