@import "./vars.pcss";

.icon {
  display: var(--iconDisplay);
  align-items: var(--iconAlignItems);
  place-content: var(--iconAlignContent) var(--iconJustifyContent);
  fill: var(--iconFill);
  width: var(--iconSize);
  height: var(--iconSize);
  flex-shrink: var(--iconFlexShrink);
  transform: var(--iconTransform);
  animation: var(--iconAnimation);
  opacity: var(--iconOpacity);
  overflow: var(--iconOverflow);
  user-select: var(--iconUserSelect);
  color: var(--iconColor);
  font-weight: var(--iconWeight);
  @mixin transition var(--iconTransition);

  svg&__src,
  span&__src {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    fill: currentColor;
    transition: inherit;
    transform: translateZ(0);
    font-weight: inherit;
    font-size: var(--iconSize);
    line-height: var(--iconLineHeight);
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-style: inherit;
  }

  &&--isReverse {
    --iconTransform: scaleX(-1) translateZ(0);
  }

  &&--isSizeAuto {
    --iconSize: 1em;
  }

  &&--isSizeSmall {
    --iconSize: 2rem;
  }

  &&--isSizeMedium {
    --iconSize: 3rem;
  }

  &&--isSizeLarge {
    --iconSize: 4rem;
  }

  &&--isSizeMax {
    --iconSize: 5rem;
  }
}