// Info Board
.info-board {
  @extend %reset;
  display: block;
  position: absolute;
  top: 35px;
  left: 35px;
  font-size: 25px;
  color: #ffffff;
  z-index: 10000;
  padding: 0;

  .intro &,
  .end-game &,
  .game-over &,
  .level-message & {
    display: none;
  }

  li {
    list-style: none;
    margin-bottom: 16px;

    &.killed-status {
      background: url("../images/ui/icons.png") no-repeat;
      background-position: 0 0;
      background-size: 114px;
      width: 114px;
      height: 39.5px;
      padding: 0 0 10px 51px;
      font-size: 32px;
      line-height: 41px;
    }

    &.life {
      margin-top: 20px;
      margin-bottom: 9px;

      .heart-icon {
        background: url("../images/ui/icons.png") no-repeat;
        background-position: 0 -47px;
        background-size: 114px;
        width: 24px;
        height: 23px;
        display: inline-block;
        margin-right: 15px;
        opacity: 1;
        transition: opacity .3s ease;

        &.hide {
          animation: flash .6s ease;
          opacity: 0.2;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &#mute-music {
      background: url("../images/ui/icons.png") no-repeat;
      background-position: 0 -75px;
      background-size: 114px;
      width: 25px;
      height: 25px;
      cursor: pointer;
      display: inline-block;
      margin-right: 6px;

      &.muted {
        background-position: 0 -105px;
      }
    }
    &#mute-sounds {
      background: url("../images/ui/icons.png") no-repeat;
      background-position: -30px -73px;
      background-size: 114px;
      width: 22px;
      height: 25px;
      cursor: pointer;
      display: inline-block;
      margin-right: 6px;

      &.muted {
        background-position: -30px -104px;
      }
    }
  }
}

// Pause/Resume Icons
#pause-game {
  background: url("../images/ui/icons.png") no-repeat;
  background-position: -60px -106px;
  background-size: 114px;
  width: 19px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 100000;

  &.paused {
    background-position: -60px -75px;
  }

  .intro &,
  .end-game &,
  .game-over &,
  .level-message & {
    display: none;
  }

  .game-paused & {
    z-index: 100000;
  }
}
