/*
 * BOOM TRAINER OS
 * DAILY + WEEKLY MISSION CLAIM UI
 */


.mission-row >
.mission-claim-button {
  align-self: center;
  justify-self: end;

  min-width: 162px;
  min-height: 38px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(74, 235, 191, .58);

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      rgba(44, 224, 176, .17),
      rgba(15, 89, 80, .13)
    );

  color: #5df0c4;

  font: inherit;

  font-size: .60rem;
  font-weight: 1000;
  letter-spacing: .055em;

  cursor: pointer;

  white-space: nowrap;

  box-shadow:
    inset 0 0 0 1px
      rgba(78, 237, 198, .035),
    0 0 18px
      rgba(48, 221, 177, .06);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.mission-row >
.mission-claim-button:hover:not(:disabled) {
  transform:
    translateY(-2px);

  border-color:
    rgba(86, 247, 202, .9);

  background:
    linear-gradient(
      135deg,
      rgba(49, 235, 184, .27),
      rgba(19, 113, 98, .19)
    );

  box-shadow:
    0 0 25px
    rgba(45, 226, 179, .13);
}


.mission-row >
.mission-claim-button span {
  margin-right: 5px;
}


.mission-row >
.mission-claim-button.is-loading {
  opacity: .72;

  cursor: wait;
}


.mission-row >
.mission-claim-button.is-claimed {
  border-color:
    rgba(89, 234, 195, .28);

  background:
    rgba(46, 217, 172, .08);

  color:
    rgba(101, 230, 196, .72);

  cursor: default;
}


.mission-row.is-claimable {
  background:
    linear-gradient(
      90deg,
      rgba(38, 220, 170, .025),
      transparent 44%
    );
}


/* Reward toast */

.boom-mission-claim-toast {
  position: fixed;

  z-index: 999999;

  left: 50%;
  bottom: 34px;

  display: flex;
  flex-direction: column;

  width:
    min(
      calc(100vw - 30px),
      470px
    );

  gap: 4px;

  padding:
    13px 18px;

  transform:
    translate(
      -50%,
      20px
    );

  border:
    1px solid
    rgba(78, 230, 194, .35);

  border-radius: 12px;

  background:
    rgba(3, 16, 23, .97);

  color: #ecfffa;

  text-align: center;

  opacity: 0;

  pointer-events: none;

  box-shadow:
    0 16px 48px
    rgba(0, 0, 0, .48);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.boom-mission-claim-toast strong {
  color: #62eec7;

  font-size: .67rem;
  letter-spacing: .08em;
}


.boom-mission-claim-toast span {
  color: #b8cfce;

  font-size: .72rem;
}


.boom-mission-claim-toast.is-visible {
  opacity: 1;

  transform:
    translate(
      -50%,
      0
    );
}


.boom-mission-claim-toast.is-error {
  border-color:
    rgba(255, 100, 117, .52);
}


.boom-mission-claim-toast.is-error strong {
  color: #ff8795;
}


@media (max-width: 760px) {

  .mission-row >
  .mission-claim-button {
    width: 100%;

    min-width: 0;

    margin-top: 8px;

    justify-self: stretch;
  }

  .boom-mission-claim-toast {
    bottom: 20px;
  }
}