<selectlist>
  <button type="selectlist">
    <selectedoption></selectedoption>
    <span class="arrow"></span>
  </button>
  <listbox>
    <option value="reply">
      <span class="material-symbols-outlined">
        reply
      </span>
      <span class="text">Reply</span>
    </option>
    <option value="reply-all">
      <span class="material-symbols-outlined">
        repartition
      </span>
      <span class="text">Reply all</span>
    </option>
    <option value="forward">
      <span class="material-symbols-outlined">
        forward
      </span>
      <span class="text">Forward</span>
    </option>
    <hr>
    <option value="edit">
      <span class="text">Edit subject</span>
    </option>
    <option value="pop-out">
      <span class="text">Pop out reply</span>
    </option>
  </listbox>
</selectlist>

selectlist {
  width: 12rem;
}

button {
  border: none;
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
  transition-duration: 0.25s;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

option {
  font-size: 1rem;
  display: grid;
  grid-template-columns: 2rem auto;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition-duration: 0.25s;
}

option:hover {
  background: lightgray;
}

option:not(:has(.material-symbols-outlined)) span {
  grid-column: 2;
}

.material-symbols-outlined {
  color: dimgray;
  font-size: 1.2rem;
}

selectedoption .text {
  display: none;
}

hr {
  height: 1px;
  background-color: lightgray;
  border: none;
}

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid;
  translate: 0 -0.4rem;
}

listbox {
  border: none;
  padding: 0.5rem 0;
}

selectlist:has(:popover-open) button {
  background: lightgray;
}