.root {
  @apply relative flex flex-col h-full col-span-1 p-3 transition duration-300 bg-white rounded-md shadow-lg;
  @apply hover:scale-105;
}

/* Item image */
.imageWrapper {
  @apply relative overflow-hidden bg-black shadow-lg hover:border-action-accent focus:border-action-accent;
}
.unrevealed {
  @apply overflow-hidden rounded-lg border-action-primary border-1;
}

/* Image overlays */
.badge {
  @apply absolute px-3 py-1 text-xs font-semibold text-center text-white uppercase rounded-full left-2;
}
.badgeNew {
  @apply badge bg-teal top-2;
}
.badgePrice {
  @apply self-center badge bg-action-primary bottom-2;
}
.badgePrice span {
  @apply font-normal;
}
.ribbon {
  @apply absolute font-bold leading-10 tracking-wider text-center text-white uppercase rotate-45 bg-teal w-52 -right-16 top-5;
}

/* Showcase actions */
.removeButton {
  @apply absolute z-10 -top-2 -right-2;
}
.removeIcon {
  @apply w-8 h-8 text-white bg-black rounded-full;
}
.overlay {
  @apply absolute inset-0 flex items-center justify-center text-white bg-black bg-opacity-50;
}
.addIcon,
.checkIcon {
  @apply w-10 h-10 p-2 text-white rounded-full;
}
.addIcon {
  @apply bg-blue-gradient-vert;
}
.checkIcon {
  @apply bg-action-secondary;
}

/* Item content */
.pills {
  @apply flex flex-wrap justify-center gap-2 mt-4;
}
.title {
  @apply px-2 mt-4 overflow-hidden text-sm font-bold leading-snug text-center uppercase text-base-textPrimary;
  @apply sm:text-base;
}
.title > div {
  @apply line-clamp-2;
}

/* Bottom row  */
.metaBoxBottom {
  @apply relative flex items-end justify-between flex-grow w-full h-8 mt-2;
}
.metaBoxBottomContent {
  @apply flex items-end justify-between w-full;
}
.collectionImage {
  @apply w-8 h-8 overflow-hidden border-white rounded-full;
}

/* Marketplace actions */
.collectibleMenu {
  @apply text-black bg-white;
}
.collectibleMenuItem,
.collectibleMenuItem:hover {
  @apply border-b-1 border-[#E0E0E0] cursor-pointer flex last:border-b-0 p-3 text-action-primary;
}
.collectibleMenuItemIcon {
  @apply text-action-primary;
}
.collectibleMenuItemText {
  @apply ml-2;
}

.actionsButton {
  @apply p-2 text-base transition bg-white rounded-full bg-opacity-10;
  @apply hover:bg-opacity-20 focus:bg-opacity-20;
  @apply md:text-lg;
}
