.UncapStar {
  $size: 18px;

  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');
    }
  }
}

// Phone up to iPhone 14 Pro Max
@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
  .UncapStar {
    background-size: cover;
    image-rendering: crisp-edges;
    height: 14px;
    width: 14px;
  }
}