.ae-badge {
  position: absolute;
  border-radius: 4px;
  background-color: #e4e4e4;
  font-size: 12px;
  max-width: calc(100% - 16px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ae-badge.top-left {
  top: 8px;
  left: 8px;
}

.ae-badge.bottom-left {
  bottom: 8px;
  left: 8px;
}

.ae-badge.top-right {
  top: 8px;
  right: 8px;
}

.ae-badge.bottom-right {
  bottom: 8px;
  right: 8px;
}

.ae-badge.percent {
  background-color: #fff0e9;
  color: #eb5757;
  padding: 2px 4px;
}

.ae-badge.voucher {
  background: linear-gradient(to right, #ef3006, #c60004);
  color: rgb(245, 245, 245);
  padding: 2px 6px;
}

.ae-badge.hot {
  background: linear-gradient(to right, #e91f63, #db2663);
  color: rgb(245, 245, 245);
  padding: 2px 6px;
}

.ae-badge.image {
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  pointer-events: none !important;
}

.ae-badge__image {
  width: 20px !important;
  height: 20px;
}

.ae-badge.image .ae-badge__image {
  position: relative !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
  z-index: 1;
}