md-select {
  display: block;
}

/* Field styles come from .md-field and the panel surface from .md-dropdown-panel
   (styles/mdds/components.css). Here only what places the panel under the field. */

.md-select .md-select__anchor {
  position: relative;
}

.md-select .md-select__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Over the page content, which in legacy screens goes up to 25 (beyond.css gives every checkbox
     12, style2.css the header 25); under the navbar (200) and the modals (1050). */
  z-index: var(--md-z-index-sm);
  /* As wide as the field (Dropdown Panel description), a 4px gap below it. */
  margin-top: var(--md-spacing-4xs);
}

/* Out of sight, still read by screen readers. */
.md-select .md-select__label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}