/*Box*/
.badge {
  background: linear-gradient(135deg, rgba(169, 176, 228, 0.747), #d6b4e6c0);
  border-radius: 3px 3px 0 3px;
  color: #555555;
  display: inline-block;
  font-size: 12px;
  padding: 0 5px;
  position: absolute;
  right: -4px;
  top: -5px;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
  z-index: 1;
}

.badge-wrapper {
  position: absolute;
  right: -4px;
  top: -4px;
}

.svg-icon {
  color: #d1d5db;
  height: 8px;
  position: absolute;
  right: -4px;
  stroke: currentColor;
  top: 13px;
  transform: rotate(90deg);
  width: 8px;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .badge {
    background: linear-gradient(135deg, rgba(116, 123, 179, 0.623), #865f9890);
    color: #e5e7eb;
  }

  .svg-icon {
    color: #4e454f95;
  }
}

/* Two-line Clamp */
.clamp-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gradient Border */
.grad-border {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* clip the pseudo-element */
}

.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  /* cover full box */
  padding: 1.8px;
  opacity: 0.5;
  /* border thickness */
  background: linear-gradient(
    to right,
    rgba(237, 47, 142, 0.692),
    rgba(169, 85, 247, 0.679),
    rgba(32, 112, 242, 0.647)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
  border-radius: inherit;
}

@media (prefers-color-scheme: dark) {
  .grad-border {
    --bg-color: rgba(35, 35, 35, 1);
  }
}