/* =========================================
   MANA ORB CONTAINER
   ========================================= */

.mana {
  display: block;
}


/* =========================================
   BASE MANA ORB
   ========================================= */

.mana-orb {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #969696;
  filter: brightness(0.4);
  position: relative;
  margin: 0 4px;
  transition: 0.5s ease filter;
  box-shadow: inset 1px -1px 1px 1px #4e4e4e;
}

.mana-orb::after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: 2px;
  left: 5px;
}


/* =========================================
   COLOR GRADIENTS
   ========================================= */

.mana-orb.mana-orb--white {
  background: linear-gradient(#878c62, #e1ea8e, #646946);
}

.mana-orb.mana-orb--blue {
  background: linear-gradient(#4e6b8e, #75b2ff, #455d7b);
}

.mana-orb.mana-orb--black {
  background: linear-gradient(#65437f, #bd76dd, #40294b);
}

.mana-orb.mana-orb--red {
  background: linear-gradient(#e29898, #ff6f6f, #865454);
}

.mana-orb.mana-orb--green {
  background: linear-gradient(#4e7549, #33d438, #44633f);
}

.mana-orb.mana-orb--colorless {
  background: linear-gradient(#828282, #dddddd, #555555);
}


/* =========================================
   SPRITE OVERLAY POSITIONS
   ========================================= */

.mana-orb--white::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -1px 0;
  background-size: cover;
}

.mana-orb--blue::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -53px 0;
  background-size: cover;
}

.mana-orb--black::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -105px 0;
  background-size: cover;
}

.mana-orb--red::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -156px 0;
  background-size: cover;
}

.mana-orb--green::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -210px 0;
  background-size: cover;
}

.mana-orb--colorless::after {
  background: url(../images/mana-logos.png) no-repeat;
  background-position: -263px 0;
  background-size: cover;
}


/* =========================================
   ACTIVE / HIGHLIGHT STATES
   ========================================= */

.white .mana-orb--white,
.blue .mana-orb--blue,
.black .mana-orb--black,
.red .mana-orb--red,
.green .mana-orb--green,
.colorless .mana-orb--colorless {
  filter: brightness(1);
  animation: blinker 1s linear 3;
}


/* =========================================
   MOBILE ADJUSTMENTS
   ========================================= */

@media only screen and (max-width: 500px) {

  .mana {
    text-align: center;
  }

  .mana-orb {
    width: 50px;
    height: 50px;
  }

  .mana-orb::after {
    width: 40px;
    height: 40px;
    top: 3px;
    left: 5px;
  }

  .mana-orb--white::after { background-position: -1px 0; }
  .mana-orb--blue::after { background-position: -43px 0; }
  .mana-orb--black::after { background-position: -84px 0; }
  .mana-orb--red::after { background-position: -126px 0; }
  .mana-orb--green::after { background-position: -168px 0; }
  .mana-orb--colorless::after { background-position: -211px 0; }

}