list,
grid {
  display: block;
  outline: none;
  overflow: auto;
  position: relative; /* Make sure that item offsets are relative to the
                         list. */
}

list > *,
grid > * {
  -webkit-user-select: none;
  background-color: rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,0); /* transparent white */
  border-radius: 2px;
  cursor: default;
  line-height: 20px;
  margin: -1px 0;
  overflow: hidden;
  padding: 0px 3px;
  position: relative; /* to allow overlap */
  text-overflow: ellipsis;
  white-space: pre;
}

list > * {
  display: block;
}

grid > * {
  display: inline-block;
}

list > [lead],
grid > [lead] {
  border-color: transparent;
}

list:focus > [lead],
grid:focus > [lead] {
  border-color: hsl(214, 91%, 65%);
  z-index: 2;
}

list > [anchor],
grid > [anchor] {

}

list:not([disabled]) > :hover,
grid:not([disabled]) > :hover {
  border-color: hsl(214, 91%, 85%);
  z-index: 1;
  background-color: hsl(214, 91%, 97%);
}

list > [selected],
grid > [selected] {
  border-color: hsl(0, 0%, 85%);
  background-color: hsl(0,0%,90%);
  z-index: 2;
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
                                            rgba(255, 255, 255, 0));
}

list:focus > [selected],
grid:focus > [selected] {
  background-color: hsl(214,91%,89%);
  border-color: hsl(214, 91%, 65%);
}

list:focus > [lead][selected],
list > [selected]:hover,
grid:focus > [lead][selected],
grid > [selected]:hover {
  background-color: hsl(214, 91%, 87%);
  border-color: hsl(214, 91%, 65%);
}

list > .spacer,
grid > .spacer {
  border: 0;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  visibility: hidden;
  margin: 0;
}