.Polaris-Badge {
  --p-component-badge-pip-color: rgba(92, 95, 98, 1);
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.8rem;
  background-color: $p-surface-neutral;
  border-radius: 2rem;
  font-size: 1.3rem;
  line-height: 1.6rem;
  color: $p-text;
  font-weight: $p-badge-font-weight;
}

@media print {
  .Polaris-Badge {
    border: solid 0.01rem $p-border;
  }
}

.Polaris-Badge--sizeSmall {
  font-size: 1.2rem;
}

.Polaris-Badge--statusSuccess {
  --p-component-badge-pip-color: rgba(0, 127, 95, 1);;
  background-color: $p-surface-success;
  color: $p-text;
}

.Polaris-Badge--statusInfo {
  --p-component-badge-pip-color: rgba(0, 160, 172, 1);;
  background-color: rgba(164, 232, 242, 1);;
  color: $p-text;
}

.Polaris-Badge--statusAttention {
  --p-component-badge-pip-color: rgb(138, 97, 22);
  background-color: #ffea8a;
  color: $p-text;
}

.Polaris-Badge--statusWarning {
  --p-component-badge-pip-color: rgba(185, 137, 0, 1);;
  background-color: $p-surface-warning;
  color: $p-text;
}

.Polaris-Badge--statusCritical {
  --p-component-badge-pip-color: $p-icon-critical;
  background-color: $p-surface-critical;
  color: $p-text;
}

.Polaris-Badge--statusNew {
  background-color: $p-surface-neutral;
  color: $p-text;
  font-weight: 500;
  border: none;
}

.Polaris-Badge__Pip {
  color: var(--p-component-badge-pip-color);
  height: 0.8rem;
  width: 0.8rem;
  margin-right: 0.4rem;
  margin-left: -0.2rem;
  border: 0.2rem solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

.Polaris-Badge--progressIncomplete .Polaris-Badge__Pip {
  background: transparent;
}

.Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
  background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent);
}

@media print {
  .Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
    background: none;
    box-shadow: 0 -10.2rem 0 -10rem currentColor inset;
  }
}

.Polaris-Badge--progressComplete .Polaris-Badge__Pip {
  background: currentColor;
}

@media print {
  .Polaris-Badge--progressComplete .Polaris-Badge__Pip {
    background: none;
    box-shadow: 0 0 0 10rem currentColor inset;
  }
}

.Polaris-Badge--withinFilter {
  border-radius: $p-border-radius-base;
}