dialog.modals--main-modal.order-edit--modal {
  width: 47.125rem;

  @media screen and (max-width: 576px) {
    width: 100dvw;
  }
}

.order-edit--form {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
}

.order-edit--fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
}

/* Native fields sized like the md pickers beside them. */
.order-edit--fields,
.order-edit--studies {
  input[type="text"] {
    height: 2.5rem;
  }

  textarea {
    height: 5rem;
    padding: var(--rem-8) var(--rem-12);
  }
}

.order-edit--checkbox {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  font-size: var(--rem-14);
  color: var(--text-body);
}

/* The studies read as a two-column table: the study picker on the left, the
   diagnosis and indication on the right, under one pair of column labels. */
.order-edit--studies {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.order-edit--studies-header,
.order-edit--study {
  display: grid;
  grid-template-columns: 17.625rem 1fr;
  align-items: start;
  gap: var(--rem-8);
}

/* A grid cell defaults to its content's width; a long study or diagnosis name
   would widen the column past the modal instead of ending in an ellipsis. */
.order-edit--studies-header > *,
.order-edit--study > * {
  min-width: 0;
}

.order-edit--study[hidden] {
  display: none;
}

.order-edit--studies-header-cell {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  height: var(--rem-24);
}

/* Lines the label up with the study picker rather than with the remove icon. */
.order-edit--studies-header-cell-study {
  padding-left: var(--rem-28);
}

.order-edit--column-label {
  flex: 1;
  font-size: var(--rem-14);
  font-variation-settings: "wght" var(--text-medium);
  color: var(--text-label);
  letter-spacing: 0;
}

.order-edit--study-rows {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.order-edit--study-picker {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

.order-edit--study-remove {
  width: var(--rem-20);
  height: var(--rem-20);
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-edit--study-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

/* The column headings name these fields, so each row keeps its own labels for
   screen readers only. */
.order-edit--row-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}