.icon {
  overflow: hidden;
  line-height: normal;
}

.icon::before {
  position: relative;
  z-index: 1;
}

.icon.icon--xs {
  width: var(--size-s);
  height: var(--size-s);
  font-size: var(--size-s);
}

.icon.icon--s {
  width: var(--size-m);
  height: var(--size-m);
  font-size: var(--size-m);
}

.icon.icon--m {
  width: var(--size-2m);
  height: var(--size-2m);
  font-size: var(--size-2m);
}

.icon.icon--l {
  width: var(--size-l);
  height: var(--size-l);
  font-size: var(--size-l);
}

.icon.icon--l.icon--emphasis {
  width: var(--core-dimension-1200);
  height: var(--core-dimension-1200);
  font-size: var(--core-dimension-1200);
}

.icon.icon--l.icon--emphasis:before {
  background-color: var(--icon-contained-primary-surface-resting);
  border-radius: 50%;
  padding: 16px;
}

.icon.icon--xl {
  width: var(--size-2xl);
  height: var(--size-2xl);
  font-size: var(--size-2xl);
}

.icon.icon--xxl {
  width: var(--size-5xl);
  height: var(--size-5xl);
  font-size: var(--size-5xl);
}

.theme--inverted .icon {
  color: var(--semantic-color-on-surface-primary-inverse-resting);
}