.icon {
  --size: ~"";

  position: relative;

  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;

  width: var(--size);
  height: var(--size);

  font-size: 0;
  text-decoration: none;
  vertical-align: middle;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;

    font-family: var(--fontFamily--icons);
    font-size: var(--size);
    -webkit-font-smoothing: antialiased;
    line-height: var(--size);
    text-align: center;
  }

  &--default::before {
    color: inherit;
  }

  &--primary::before {
    color: rgb(var(--foreground--neutral-full-default--light));
  }

  &--secondary::before {
    color: rgb(var(--foreground--neutral-medium-default--light));
  }

  &--tertiary::before {
    color: rgb(var(--foreground--neutral-full-default--dark));
  }

  &--sm {
    --size: var(--size--lg);
  }

  &--md {
    --size: var(--size--xl);
  }

  &--lg {
    --size: var(--size--2xl);
  }
}