/* The Message details card, below the task's item details. */
.pharmacy-messages--details-card {
  width: 100%;
  margin-top: var(--rem-32);
}

/* The Submission card: one row per reply. */
.pharmacy-messages--replies {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pharmacy-messages--reply {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rem-16);
  padding-block: var(--rem-12);

  & + & {
    border-top: 1px solid var(--border-secondary);
  }
}

.pharmacy-messages--reply-text,
.pharmacy-messages--reply-end {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
}

.pharmacy-messages--reply-end {
  align-items: flex-end;
  text-align: right;
}

.pharmacy-messages--reply-decision {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-22);
  color: var(--text-body);
}

.pharmacy-messages--reply-reason {
  display: flex;
  flex-direction: column;
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-body);

  /* The field an updated prescription changed. */
  strong {
    font-variation-settings: 'wght' var(--text-semibold);
  }
}

/* The files sent with a message reply. */
.pharmacy-messages--reply-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rem-4) var(--rem-12);
}

.pharmacy-messages--reply-file {
  display: inline-flex;
  align-items: center;
  gap: var(--rem-6);
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-subheading);
}

.pharmacy-messages--reply-recipient,
.pharmacy-messages--reply-meta,
.pharmacy-messages--reply-error {
  font-size: var(--rem-13);
  line-height: var(--rem-20);
  color: var(--text-additional);
}

.pharmacy-messages--reply-recipient {
  color: var(--text-subheading);
}

.pharmacy-messages--reply-error {
  color: var(--text-error);
}

/* A pharmacy, patient or medication behind its avatar. A medication's
   directions go under its name. */
.pharmacy-messages--entity {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);

  .avatar {
    margin-block: var(--rem-1);
  }
}

.pharmacy-messages--entity-text {
  display: flex;
  flex-direction: column;
}

.pharmacy-messages--entity-name {
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral);
}

.pharmacy-messages--entity-detail {
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);
}

/* What the request itself asks, below the card's shared rows. */
.pharmacy-messages--request-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* A medication or plan from the request: its name, then its details as smaller rows. */
.pharmacy-messages--item {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);

  & + & {
    margin-top: var(--rem-12);
  }
}

.pharmacy-messages--item-name {
  font-variation-settings: 'wght' var(--text-medium);
}

.pharmacy-messages--diagnosis {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

/* A code next to its meaning, such as a diagnosis's ICD-10 code. */
.pharmacy-messages--code {
  padding: var(--rem-2) var(--rem-4);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-additional);
  background-color: var(--surface-secondary);
  border-radius: var(--radius-xs);
}

.pharmacy-messages--hint,
.pharmacy-messages--caption {
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-additional);
}

/* The patient as the request names them, for comparing with the picked one. */
.pharmacy-messages--sent-patient {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.pharmacy-messages--link-patient {
  width: 100%;
  max-width: var(--horizontal-input-group-max-width);
}

/* The due date of the task a pharmacy message review will create, aligned with
   the Tasks card's other rows. */
.pharmacy-messages--task-due-date {
  width: var(--rem-85);
  text-align: right;
}

/* The Message card of a pharmacy message's review. A select's leading icon
   keeps its label beside it, not centred. */
.pharmacy-messages--card .select span.dropdowns--trigger-label {
  flex: 1;
  text-align: left;
}

/* New task's Pharmacy message fields, in the footer's row of pills. */
.pharmacy-messages--new-task-fields {
  display: flex;
  align-items: center;
  gap: var(--rem-8);

  .select {
    width: fit-content;
  }

  /* A long medication name truncates instead of widening the modal. */
  .select .dropdowns--trigger-button span.dropdowns--trigger-label {
    max-width: 12rem;
  }

  .search-select {
    width: 11rem;
  }
}