.icon {
  align-self: center;
}

.icon .imgContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon.grpIcon {
  display: flex;
  justify-content: center;
}

.icon.grpIcon.column {
  flex-direction: column;
}

.icon.grpIcon.alignLeft {
  justify-content: left;
}

.icon.grpIcon .groupLabel {
  display: grid;
  grid-template-rows: 1fr auto;
  line-height: 1.15;
  padding-left: var(--pad);
}

.icon.grpIcon .img,
.icon.grpIcon .color {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon.grpIcon .img.square,
.icon.grpIcon .color.square {
  border-radius: unset;
}

.icon.grpIcon .multiGrpContainer {
  position: relative;
}

.icon.grpIcon .multiGrpContainer.xsContainer {
  width: 1.6rem;
  height: 1.6rem;
}

.icon.grpIcon .multiGrpContainer.smlContainer {
  width: 1.85rem;
  height: 1.85rem;
}

.icon.grpIcon .multiGrpContainer.medContainer {
  width: 3.1rem;
  height: 3.1rem;
}

.icon.grpIcon .multiGrpContainer.lrgContainer {
  width: 3.6rem;
  height: 3.6rem;
}

.icon.grpIcon .multiGrpContainer .grpIconTop {
  position: absolute;
  top: 0;
  left: 0;
}

.icon.grpIcon .multiGrpContainer .grpIconBottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

.icon.grpIcon .multiGrpContainer .number {
  position: absolute;
  bottom: 0;
  line-height: 1;
}

.icon.grpIcon .groupLabel .verticalAlignContainer {
  display: flex;
  align-items: center;
}

.icon .tagContainer {
  position: relative;
}

.icon .tagContainer .tagLabel {
  position: absolute;
  padding: 0 calc(var(--half-pad) / 2);
  left: -0.5rem;
}