.order-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  padding: 6px 10px 6px 20px;
  border: 1px solid transparent;
  background-color: #fff;
  max-width: max-content;
  max-height: max-content;
  pointer-events: none;
  user-select: none;
}
.order-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  margin: auto 0;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  background-color: transparent;
}
.order-status p {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33333;
  white-space: nowrap;
}
.order-status.pending {
  border-color: #ffebee;
  background-color: #ffebee;
}
.order-status.pending::before {
  background-color: #e0252f;
}
.order-status.pending p {
  color: #e0252f;
}
.order-status.process {
  border-color: #ffead9;
  background-color: #ffead9;
}
.order-status.process::before {
  background-color: #ff7100;
}
.order-status.process p {
  color: #ff7100;
}
.order-status.work {
  border-color: #eaeaea;
  background-color: #eaeaea;
}
.order-status.work::before {
  background-color: #636363;
}
.order-status.work p {
  color: #636363;
}
.order-status.shipped, .order-status.transit, .order-status.ready {
  border-color: #e3fae0;
  background-color: #e3fae0;
}
.order-status.shipped::before, .order-status.transit::before, .order-status.ready::before {
  background-color: #40b231;
}
.order-status.shipped p, .order-status.transit p, .order-status.ready p {
  color: #40b231;
}
.order-status.issued {
  border-color: #d6f7d2;
}
.order-status.issued::before {
  background-color: #40b231;
}
.order-status.issued p {
  color: #40b231;
}
.order-status.cancelled {
  border-color: #f1d7d7;
}
.order-status.cancelled::before {
  background-color: #e0252f;
}
.order-status.cancelled p {
  color: #e0252f;
}