.labeledIcon {
  min-width: 4rem;
  max-width: 12.5rem;
  margin: 0.375rem;
  padding: 0 0.375rem;
  font-size: 1rem;
}
.labeledIcon.below .icon {
  margin-top: 0;
  margin-bottom: 0.375rem;
}
.labeledIcon.above .icon {
  margin-top: 0.375rem;
  margin-bottom: 0;
}
.labeledIcon.after .icon,
.labeledIcon.before .icon,
.labeledIcon.left .icon,
.labeledIcon.right .icon {
  margin-top: 0;
  margin-bottom: 0;
}
.labeledIcon .label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}
.labeledIcon.above,
.labeledIcon.below {
  text-align: center;
}
.labeledIcon.after .label,
.labeledIcon.before .label,
.labeledIcon.left .label,
.labeledIcon.right .label {
  flex-shrink: 1;
}
.labeledIcon.before {
  text-align: end;
}
.labeledIcon.left {
  text-align: right;
}
.labeledIcon.right {
  text-align: left;
}