.io-widget-hot-api {
  --e3-hot-column-width: 3.2rem;
  --e3-hot-column-right-gap: 19px;
}

.io-widget-hot-api .hot-heat.e3-hot-heat-empty {
  display: none !important;
}

/* Keep the card scrollbar subtle and away from the heat column. */
.io-widget-hot-api .hotapi-body {
  box-sizing: border-box;
  padding-right: 7px;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.io-widget-hot-api .hotapi-body::-webkit-scrollbar {
  width: 5px;
}

.io-widget-hot-api .hotapi-body::-webkit-scrollbar-track {
  background: transparent;
}

.io-widget-hot-api .hotapi-body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
  transition: background-color 0.18s ease;
}

.io-widget-hot-api .hotapi-body.e3-hotapi-scrolling {
  scrollbar-color: rgba(108, 117, 125, 0.42) transparent;
}

.io-widget-hot-api .hotapi-body.e3-hotapi-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(108, 117, 125, 0.48);
}

.io-widget-hot-api .hot-heat:not(.e3-hot-heat-empty) {
  box-sizing: border-box;
  flex: 0 0 var(--e3-hot-column-width);
  width: var(--e3-hot-column-width);
  min-width: var(--e3-hot-column-width);
  margin-right: 2px;
  text-align: right;
}

.io-widget-hot-api .hotapi-card .widget-header > .slug-name {
  box-sizing: border-box;
  flex: 0 0 var(--e3-hot-column-width);
  width: var(--e3-hot-column-width);
  min-width: var(--e3-hot-column-width);
  margin-right: var(--e3-hot-column-right-gap);
  text-align: right;
}