@shopware-ag/meteor-component-library/dist/mt-color-badge.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-color-badge {
  display: inline-block;
  height: var(--scale-size-8);
  width: var(--scale-size-8);
  margin: 0 0 1px var(--scale-size-10);
  border-radius: 2px;
  background-color: #d1d9e0;
&.is--rounded {
    border-radius: 100%;
}
&.is--warning {
    background-color: #ff9800;
}
&.is--critical,
  &.is--danger {
    background-color: #de294c;
}
&.is--positive {
    background-color: #37d046;
}
&.is--info {
    background-color: #189eff;
}
&.has--text {
    height: auto;
    width: auto;
    padding: var(--scale-size-4) var(--scale-size-8);
    border-radius: 8px;
&.is--warning {
      background-color: #fff3e0;
      color: #e65100;
}
&.is--critical,
    &.is--danger {
      background-color: #fbe5ea;
      color: #c80f24;
}
&.is--positive {
      background-color: #e7f9e9;
      color: #16b320;
}
&.is--info {
      background-color: #e3f3ff;
      color: #0870ff;
}
}
}