@shopware-ag/meteor-component-library/dist/mt-avatar.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-avatar[data-v-06d2c9fa] {
  display: inline-grid;
  place-items: center;
  width: var(--mt-avatar-size);
  height: var(--mt-avatar-size);
  border-radius: var(--border-radius-round);
  background-size: cover;
  font-size: calc(var(--mt-avatar-size) * 0.4);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  user-select: none;

  color: var(--mt-avatar--color-primary);
  background-color: var(--mt-avatar--color-secondary);
}
.mt-avatar--size-2xs[data-v-06d2c9fa] {
  --mt-avatar-size: var(--scale-size-16);
}
.mt-avatar--size-xs[data-v-06d2c9fa] {
  --mt-avatar-size: var(--scale-size-24);
}
.mt-avatar--size-s[data-v-06d2c9fa] {
  --mt-avatar-size: var(--scale-size-32);
}
.mt-avatar--size-m[data-v-06d2c9fa] {
  --mt-avatar-size: var(--scale-size-40);
}
.mt-avatar--size-l[data-v-06d2c9fa] {
  --mt-avatar-size: var(--scale-size-48);
}
[data-theme="dark"] .mt-avatar[data-v-06d2c9fa] {
  color: var(--mt-avatar--color-secondary);
  background-color: var(--mt-avatar--color-primary);
}
.mt-avatar--square[data-v-06d2c9fa] {
  border-radius: var(--border-radius-xs);
}
.mt-avatar--color-orange[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #974200;
  --mt-avatar--color-secondary: #fff2ec;
}
.mt-avatar--color-green[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #007e4e;
  --mt-avatar--color-secondary: #ddffea;
}
.mt-avatar--color-pink[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #a8005c;
  --mt-avatar--color-secondary: #fff1f5;
}
.mt-avatar--color-yellow[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #4f4100;
  --mt-avatar--color-secondary: #fff7d6;
}
.mt-avatar--color-purple[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #633bc6;
  --mt-avatar--color-secondary: #f5f4ff;
}
.mt-avatar--color-red[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #90000e;
  --mt-avatar--color-secondary: #fff2f0;
}
.mt-avatar--color-blue[data-v-06d2c9fa] {
  --mt-avatar--color-primary: #005b99;
  --mt-avatar--color-secondary: #eef6ff;
}