////// Card badges //////

.card .card-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 65px;
  overflow: hidden;
}

.card .card-badge::before {
  position: absolute;
  display: block;
  content: "";
  transform: rotate(45deg);
  width: 100px;
  height: 25px;
  right: -25px;
  top: 10px;
  background-color: $gray-darker;
}

.card .card-badge::after {
  position: absolute;
  display: inline-block;
  width: $icon-xs;
  height: $icon-xs;
  content: "";
  right: 14px;
  top: 17px;
  mask-image: url("@images/exclamation-circle-filled.svg");
  mask-repeat: no-repeat;
  background-color: $white;
}

.card .card-badge.success {
  &::before {
    background-color: $success;
  }
  &::after {
    mask-image: url("@images/check-thick.svg");
    right: 16px;
  }
}

.card .card-badge.danger,
.card .card-badge.high-priority {
  &::before {
    background-color: $danger;
  }
  &::after {
    mask-image: url("@images/exclamation-circle-filled.svg");
  }
}

.card .card-badge.info, 
.card .card-badge.opportunity {
  &::before {
    background-color: $info;
  }
  &::after {
    mask-image: url("@images/exclamation-circle-filled.svg");
  }
}

.card .card-badge.paid-test {
  left: 0;
  right: auto;
  &::before {
    transform: rotate(135deg);
    left: -25px;
    right: auto;
    top: 10px;
    background-color: $purple;
  }
  &::after {
    mask-image: url("@images/billing.svg");
    left: 14px;
    right: 0;
  }
}