.order-list--container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}


.order-list--item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.order-list--item:last-child {
  border-bottom: none;
}

.order-list--icon {
  width: var(--rem-34);
  height: var(--rem-34);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon background colors based on order type */
.order-list--icon-lab { background-color: #3B82F6; }
.order-list--icon-imaging { background-color: #EC4899; }
.order-list--icon-emg { background-color: #14B8A6; }
.order-list--icon-eeg { background-color: #8B5CF6; }
.order-list--icon-dme { background-color: #F97316; }
.order-list--icon-consultation { background-color: #10B981; }

.order-list--content {
  flex: 1;
  min-width: 0;
}

.order-list--info {
  display: flex;
  flex-direction: column;
  gap: var(--rem-10);
}

.order-list--title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-heading);
  font-variation-settings: 'wght' var(--text-medium);
  font-size: var(--rem-14);
  line-height: 1rem;
  letter-spacing: 0;
  text-decoration: none;
}

.order-list--status {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text-additional);
  font-size: var(--rem-13);
  line-height: 1rem;
  letter-spacing: 0;
}

/* The prescriber of a sent medication order, in line with its status text. */
.order-list--status .avatar {
  display: inline-flex;
  vertical-align: middle;
}

.order-list--status-dot {
  width: var(--rem-10);
  height: var(--rem-10);
  border-radius: 50%;
  flex-shrink: 0;
}

.order-list--status-dot-signed {
  background-color: var(--primary-500);
}

.order-list--status-dot-draft {
  background-color: var(--neutral-400);
}

.order-list--actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: .75rem;
}

.orders--section {
  margin-top: var(--rem-16);
}

.orders--section-header {
  font-size: var(--rem-12);
  font-weight: 500;
  color: var(--text-label);
  margin-bottom: var(--rem-12);
  padding: 0 var(--rem-16);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.orders--section-list {
  width: 100%;
  background-color: white;
  border-radius: var(--radius-md);
  outline: solid 1px var(--border-secondary);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}

.order-list--divider:last-of-type {
  display: none;
}

.orders--empty-state {
  font-size: var(--rem-14);
  line-height: var(--rem-21);
  text-align: center;
  padding: var(--rem-24) var(--rem-16);
  color: var(--text-information);
}

.order-list--left-container {
  width: fit-content;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  flex-grow: 1;
  flex-shrink: 1;
}

.order-list--left-text-container {
  max-width: calc(100% - 3rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .25rem;
}

.order-list--right-container {
  width: fit-content;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 10rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.order-list--divider {
  width: calc(100% - 3rem);
  height: 1px;
  background-color: var(--neutral-100);
  margin-left: auto;
  margin-right: 0;

  &[data-size="full-width"] {
    width: 100%;
    margin-left: unset;
    margin-right: unset;
  }
}

/* The whole header is the fold control, so it is a button rather than a label
   with a rule through it. Its caret and title still start at the left edge:
   buttons.css centres the contents of every bare button. */
.order-list--header {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--rem-8);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-list--header span {
  color: var(--text-label);
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  letter-spacing: 0;
  line-height: 1rem;
  white-space: nowrap;
}

.order-list--header .icon {
  transition: rotate .2s ease-in-out;
}

.order-list--header[aria-expanded="false"] .icon {
  rotate: -90deg;
}

.order-list--section-body {
  width: 100%;
}

.order-list--full-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--rem-12);
}