/* == GROUP: LISTBOX
https://otwcode.github.io/docs/patterns/listbox.html
*/

.listbox, fieldset fieldset.listbox {
  clear: right;
  background: #ddd;
  border: 2px solid #ccc;
  padding: 0;
  margin: 0.643em auto;
  overflow: hidden;
    box-shadow: 0 0 0 1px #fff;
}

.listbox .heading {
  display: inline-block;
}

.listbox li.blurb, .listbox .landmark.heading, .listbox .tags .listbox, .listbox .lots li, .listbox .all li {
  display: block;
}

.listbox > .heading, .listbox .heading a:visited {
  margin: 0;
  color: #2a2a2a;
  padding: 0.25em;
}

.listbox > .notice {
  margin: 0.25em;
}

.listbox .index {
  width: auto;
  padding: 0.643em;
  margin: 0;
  float: none;
  clear: right;
  background: #fff;
    box-shadow: inset 1px 1px 3px #bbb;
}

.listbox .index:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.commas li.listbox:after {
  content: none;
}

.listbox li.blurb {
    box-shadow: none;
}

/* mods: alphabet, medium */

.alphabet .listbox li, .media .listbox {
  width: 45%;
  float: left;
  clear: none;
  margin-right: 1.5em;
}

/* Contexts */

.review .listbox {
  overflow: visible;
  position: static;
}

/* The height (1.286em) of the buttons plus their veritcal padding (0.25em * 2) plus the vertical padding (0.15em * 2) of the actions container (=2.086em), multiplied by 0.75 because the actions are only 75% of the heading's font size. Unfortunately, this doesn't account for the buttons' vertical borders (1px * 2). */
.tagset .listbox > .heading:has(.actions) {
  line-height: 1.5645;
}

/* INTERACTION context (show many/more/lots) */

.listbox .options {
  overflow: auto;
}

.listbox .all {
  height: auto;
}

.listbox .many {
  max-height: 12em;
}

/*END== */