/* Fixed order semantics, independent of the storefront's brand colours. */
.order-status {
  --order-status-text: #414651;
  --order-status-background: #f5f5f6;
  --order-status-border: #d5d7da;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--order-status-border);
  border-radius: 8px;
  background: var(--order-status-background);
  color: var(--order-status-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  vertical-align: middle;
  text-align: start;
}

.order-status--waiting {
  --order-status-text: #93370d;
  --order-status-background: #fff4eb;
  --order-status-border: #f5c49f;
}

.order-status--active {
  --order-status-text: #175cd3;
  --order-status-background: #eff8ff;
  --order-status-border: #b2ddff;
}

.order-status--success {
  --order-status-text: #067647;
  --order-status-background: #ecfdf3;
  --order-status-border: #abefc6;
}

.order-status--error {
  --order-status-text: #b42318;
  --order-status-background: #fef3f2;
  --order-status-border: #fecdca;
}

.order-status > svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-status > span {
  min-width: 0;
  overflow-wrap: break-word;
}