.droplist {
  --scale-factor: 0.6;
  box-sizing: border-box;
  border: 0.2em solid var(--green);
  border-radius: 1em;
  cursor: text;
  font-size: var(--font-size-sm);
  width: 45vw;
  padding: 1vh;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--light-green);
}

.droplist:focus {
  transform: scale(1.02);
}

@media (min-width: 768px) {
  .droplist {
    --scale-factor: 0.8;
    width: 35vw;
    font-size: var(--font-size-xl);
    border-radius: 0.7em;
  }
}

@media (min-width: 1280px) {
  .droplist {
    --scale-factor: 1;
    width: 25vw;
    font-size: var(--font-size-3xl);
    border-radius: 0.4em;
  }
}

.droplist.custom-font {
  font-size: calc(var(--max-font-size) * var(--scale-factor));
}

.droplist.custom-width {
  width: calc(var(--max-width) * var(--scale-factor));
}