.icon {
  display: inline-flex;
  user-select: none;
  align-items: center;
  pointer-events: none;
}

.icon > svg {
  width: 1em;
  height: 1em;
  font-size: inherit;
  flex-shrink: 0;
  display: inline-block;
}

.icon--size-inherit { font-size: inherit; }
.icon--size-small { font-size: var(--hs-typography-extrasmall-size); }
.icon--size-base { font-size: var(--hs-typography-base-size); }
.icon--size-medium { font-size: calc(var(--hs-typography-base-size) * 1.1); }
.icon--size-large { font-size: var(--hs-typography-large-size); }
.icon--size-larger { font-size: calc(var(--hs-typography-large-size) * 1.25); }
.icon--size-extralarge { font-size: calc(var(--hs-typography-large-size) * 1.5); }

.icon--rotate-45 { transform: rotate(45deg); }
.icon--rotate-90 { transform: rotate(90deg); }
.icon--rotate-135 { transform: rotate(135deg); }
.icon--rotate-180 { transform: rotate(180deg); }
.icon--rotate-225 { transform: rotate(225deg); }
.icon--rotate-270 { transform: rotate(270deg); }
.icon--rotate-315 { transform: rotate(315deg); }
.icon--rotate-360 { transform: rotate(360deg); }