#selection-controls {
  display: flex;
}

#selection-controls .hotness-selector {
  margin-right: 4px;
}

#selection-controls .rank-wrapper {
  margin: 0px 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

#selection-controls input.hotness-selector {
  background-color: var(--opposite-contrast);
  border: none;
  color: var(--max-contrast);
  height: 100%;
  padding: 0;
  text-align: center;
  width: 3.3em;
}

#selection-controls .hotness-selector,
#selection-controls label {
  font-size: var(--small-text-size);
}

#selection-controls label {
  color: var(--grey-highlight);
}

.visible-from-bp-1,
.visible-from-bp-2 .label {
  display: none;
}

@media screen and (min-width: 530px) {
  .visible-from-bp-1 {
    display: initial;
  }
}

@media screen and (min-width: 680px) {
  .visible-from-bp-2 .label {
    display: initial;
  }
}

/* presentation mode */
.presentation-mode #selection-controls {
  background-color: transparent;
  padding: 0px;
}