.Status,
.Status-dots {
  display: flex;
  align-items: center;
}

.Status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 100%;
}

.Status-dot + .Status-dot {
  @include margin-inline(start, 3px);
}

.Status-label {
  @include font(label);
  display: inline-block;
  border-radius: 2rem;
  padding: 0.125rem 0.75rem;
  color: white;
  white-space: nowrap;
}

.Status-label + .Status-label {
  @include margin-inline(start, 0.25rem);
}

.Status--labelled {
  .Status-label {
    @include margin-inline(end, 0.75rem);
  }
}