/* icon-dropdown.css

   The look of a dropdown whose entries carry a picture as well as a word. What one IS and when it
   is built is in icon-dropdown.js ; this file says only what it looks like.

   IT IS DRAWN AS THE SELECT IT STANDS ON. The toolbar around it is a grid of fields at one height
   with one border and one pair of theme colours, so a control that looked like anything else would
   read as a fault whatever it did. The colours and the height below are the ones the toolbar's own
   stylesheet gives a select, written here because a button is not a select and inherits none of them.

   THREE THINGS ABOUT THIS CONTROL ARE NOT IN THIS FILE, and each is somewhere that already owns it :
   the ring a changed filter wears, the height a field is given on a touch screen, and the share of a
   row a field takes inside the small-screen sheet. All three are rules that already name every field
   of this toolbar, and the face is named alongside them rather than given a second copy of the value.

   A PICTURE IS PART OF THE DOCUMENT rather than loaded from an address : the script puts the drawing
   itself inside the span below. So a stone drawn in `currentColor` follows the theme, and a cut corner
   drawn in a red of its own stays that red - which is what separates a square with cut corners from a
   plain octagon, those being the same outline. All this file does about a drawing is size it. */

.icon-dropdown {
  position: relative;
  min-width: 0;
}

/* The select is still the value and still answers to its own id ; it is simply not the thing on
   screen once the control has been built around it. Kept in the layout at no size rather than set
   to `display: none`, so nothing that measures or focuses it finds it detached from the document.

   This rule reaches the select ONLY inside a built control, which is what leaves a page whose
   scripts never ran showing the browser's own dropdown, with every entry and every value in it. */
.icon-dropdown > select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.icon-dropdown-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  padding: 4px 22px 4px 6px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #2c2c2c;
  color: #eaeaea;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
}

body.light-mode .icon-dropdown-face {
  background-color: #ffffff;
  color: #1f1f1f;
  border-color: #ccc;
}

/* The arrow a dropdown carries, drawn out of a border rather than written as a character so it is
   the same mark at every text size and on every machine. It sits in the padding the face keeps clear
   on its right, so a long name runs under it rather than over it. */
.icon-dropdown-face::after {
  content: "";
  position: absolute;
  right: 8px;
  /* Half of this box is the visible triangle and half is the transparent bottom border, so the box
     is lifted by half the visible half to put the mark itself on the middle of the field. */
  top: calc(50% - 2px);
  border: 4px solid transparent;
  border-top-color: currentColor;
}

/* A name too long for the field is cut with an ellipsis rather than allowed to widen it : the width
   of this cell is what holds the whole toolbar to the page, and one long shape name must not move it. */
.icon-dropdown-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The room one picture takes. An entry with no picture keeps it and draws nothing in it, so every name in
   the list starts at the same place whether or not the shape beside it has been drawn. */
.icon-dropdown-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* The drawing put inside that room. It carries its own square viewBox, so being told the two sides it has
   to fit is the whole of what it needs from here. */
.icon-dropdown-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The list is drawn OVER the page rather than in it, so opening one does not move every control
   underneath it down the screen. Its stacking order is above the pinned toolbar it is opened from,
   which is the only thing on this page drawn above the gallery. */
.icon-dropdown-entry-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 1100;
  min-width: 100%;
  max-width: 320px;
  /* A list of fifty shapes is taller than most screens, so it scrolls inside itself. */
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #2c2c2c;
  color: #eaeaea;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

body.light-mode .icon-dropdown-entry-list {
  background-color: #ffffff;
  color: #1f1f1f;
  border-color: #ccc;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.icon-dropdown-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  cursor: pointer;
}

/* One highlight for both ways of reaching an entry - the pointer over it and the keyboard on it -
   because they are the same thing to whoever is looking at the list, and two marks on screen at once
   would be the list claiming two entries are about to be chosen. */
.icon-dropdown-entry:hover,
.icon-dropdown-entry-active {
  background-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

body.light-mode .icon-dropdown-entry:hover,
body.light-mode .icon-dropdown-entry-active {
  background-color: color-mix(in srgb, var(--accent-light) 16%, transparent);
}

/* The entry the field is holding, marked so a reopened list says what was chosen last time without
   the reader having to find it. It is a weight rather than a colour, so it survives the highlight
   above being drawn on top of it as the reader moves down the list. */
.icon-dropdown-entry[aria-selected="true"] {
  font-weight: 600;
}