/* Meridian · Select dropdown
   Custom:   .dm-select[data-dm-select] — trigger button + role="listbox" popup.
   Native:   .dm-select--native — styled wrapper around a real <select> (no JS).
   The popup fades + scales from the top edge; the chevron rotates while open. */

.dm-select {
  position: relative;
  width: 100%;
  max-width: 280px;
}

/* ---- Trigger -------------------------------------------------------------- */

.dm-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-sm);
  width: 100%;
  height: var(--dm-input-height);
  padding: 0 14px;
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  text-align: left;
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-md);
  cursor: pointer;
  transition: border-color var(--dm-duration-fast) var(--dm-ease-standard),
    box-shadow var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-select__trigger:hover {
  border-color: var(--dm-color-on-surface-variant);
}

.dm-select--open .dm-select__trigger {
  border-color: var(--dm-color-primary);
  box-shadow: 0 0 0 1px var(--dm-color-primary);
}

.dm-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-select__value--placeholder {
  color: var(--dm-color-on-surface-variant);
}

/* Chevron drawn from two borders; rotates 180° while open */
.dm-select__chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: solid var(--dm-color-on-surface-variant);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transform-origin: 66% 66%;
  transition: transform var(--dm-duration-base) var(--dm-ease-emphasized);
}

.dm-select--open .dm-select__chevron {
  transform: rotate(225deg);
}

/* ---- Popup listbox ---------------------------------------------------------- */

.dm-select__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--dm-space-xs));
  left: 0;
  right: 0;
  max-height: 280px;
  margin: 0;
  padding: var(--dm-space-xs);
  list-style: none;
  overflow-y: auto;
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline-variant);
  border-radius: var(--dm-rounded-md);
  box-shadow: var(--dm-shadow-lg);
  /* closed state: faded, slightly shrunk from the top */
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transform-origin: top;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dm-duration-base) var(--dm-ease-emphasized),
    transform var(--dm-duration-base) var(--dm-ease-emphasized),
    visibility 0s linear var(--dm-duration-base);
}

.dm-select--open .dm-select__list {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ---- Options ------------------------------------------------------------------ */

.dm-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-sm);
  min-height: 40px;
  padding: 0 10px;
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  border-radius: var(--dm-rounded-sm);
  cursor: pointer;
  transition: background-color var(--dm-duration-fast) var(--dm-ease-standard),
    color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-select__option:hover,
.dm-select__option--active {
  background: var(--dm-color-surface-variant);
}

.dm-select__option[aria-selected="true"] {
  background: var(--dm-color-primary-subtle);
  color: var(--dm-color-on-primary-subtle);
  font-weight: 600;
}

/* Checkmark on the selected option, drawn from two borders */
.dm-select__option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 5px;
  height: 10px;
  margin-right: 4px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==========================================================================
   Native fallback — a real <select>, restyled. Zero JS.
   ========================================================================== */

.dm-select--native {
  display: block;
}

.dm-select--native .dm-select__native {
  width: 100%;
  height: var(--dm-input-height);
  padding: 0 38px 0 14px;
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-md);
  cursor: pointer;
  appearance: none;
  transition: border-color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-select--native .dm-select__native:hover {
  border-color: var(--dm-color-on-surface-variant);
}

/* Chevron overlaid on the wrapper so it inherits theme colors */
.dm-select--native::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border: solid var(--dm-color-on-surface-variant);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}