.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  border: 1px solid rgba(55, 53, 47, 0.12);
  background: #fff;
  white-space: nowrap;
  box-sizing: border-box;
}

.tag-green,
.tag-pay.pay-green,
.tag-proc.proc-green,
.tag-product-status.tag-green,
.tag-finance-status.tag-green,
.tag-ads-status.tag-green,
.tag-ok {
  border-color: rgba(15, 186, 49, 0.25);
  background: rgba(15, 186, 49, 0.12);
  color: #0b7b20;
}

.tag-yellow,
.tag-pay.pay-yellow,
.tag-proc.proc-yellow,
.tag-finance-status.tag-yellow {
  border-color: rgba(255, 138, 0, 0.25);
  background: rgba(255, 138, 0, 0.1);
  color: #b86200;
}

.tag-red,
.tag-pay.pay-red,
.tag-proc.proc-red {
  border-color: rgba(237, 21, 21, 0.25);
  background: rgba(237, 21, 21, 0.08);
  color: #b10f0f;
}

.tag-gray,
.tag-pay,
.tag-pay.pay-gray,
.tag-proc,
.tag-proc.proc-gray,
.tag-product-status,
.tag-product-status.tag-gray,
.tag-offer-status,
.tag-offer-status.tag-gray,
.tag-finance-status,
.tag-finance-status.tag-gray,
.tag-finance-type,
.tag-finance-type.tag-gray,
.tag-currency,
.tag-currency.tag-gray,
.tag-ads-status,
.tag-ads-status.tag-gray,
.tag-muted {
  border-color: rgba(96, 100, 108, 0.18);
  background: rgba(96, 100, 108, 0.08);
  color: #60646c;
}

.tag-blue,
.tag-proc.proc-blue,
.tag-currency.tag-blue,
.tag-finance-type.tag-blue {
  border-color: rgba(36, 99, 235, 0.25);
  background: rgba(36, 99, 235, 0.1);
  color: #1d4ed8;
}

.tag-purple,
.tag-proc.proc-purple,
.tag-currency.tag-purple,
.tag-finance-type.tag-purple {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}

.tag-orange {
  border-color: rgba(255, 138, 0, 0.25);
  background: rgba(255, 138, 0, 0.1);
  color: #b86200;
}

.tag-pay,
.tag-proc,
.tag-product-status,
.tag-offer-status,
.tag-finance-status,
.tag-finance-type,
.tag-currency,
.tag-ads-status,
.tag-ok,
.tag-muted {
  text-transform: uppercase;
}
