.star {
  $size: 18px;
  position: relative;

  &:hover {
    transform: scale(1.2);
  }

  &.immutable {
    pointer-events: none;
  }

  &.empty {
    @include hidpiImage('/icons/transcendence/0/stage-0', png, $size, $size);
  }

  &.stage1 {
    @include hidpiImage('/icons/transcendence/1/stage-1', png, $size, $size);
  }

  &.stage2 {
    @include hidpiImage('/icons/transcendence/2/stage-2', png, $size, $size);
  }

  &.stage3 {
    @include hidpiImage('/icons/transcendence/3/stage-3', png, $size, $size);
  }

  &.stage4 {
    @include hidpiImage('/icons/transcendence/4/stage-4', png, $size, $size);
  }

  &.stage5 {
    @include hidpiImage('/icons/transcendence/5/stage-5', png, $size, $size);
  }

  .figure {
    $size: 18px;
    background-repeat: no-repeat;
    background-size: 54px 54px;
    display: block;
    height: $size;
    width: $size;

    &.interactive.base {
      $size: $unit-6x;

      @include hidpiImage(
        '/icons/transcendence/interactive/interactive-base',
        png,
        $size,
        $size
      );

      height: $size;
      width: $size;

      &:hover {
        cursor: pointer;
        transform: none;
      }
    }

    &:hover {
      transform: scale(1.2);
    }
  }
}