@use "./icons/download";
@use "./icons/github";
@use "./icons/internet";
@use "./icons/mail";

[class*=" icon-"],
[class^="icon-"] {
  --icon-size: 1.5rem;
 vertical-align: top;

 &:before, &:after {
  --m-interior: .5rem;
  --m-exterior: -.125rem;
  background-color: var(--icon-color, currentColor);
  display: inline-block;
  flex: 0 0 auto;
  block-size: 1.5rem;
  inline-size: 1.5rem;
  block-size: var(--icon-size);
  inline-size: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  vertical-align: calc(.375em - .75rem);
  vertical-align: calc((.75em - var(--icon-size))*.5);
 }

 &:before,
 &.icon--right:after {
   content: "";
 }

 &.icon--right:before {
   content: none
 }
}

.icon--left:before {
  margin-inline-start: var(--m-exterior);
  margin-inline-end: var(--m-interior);
}

.icon--right:after {
  margin-inline-start: var(--m-interior);
  margin-inline-end: var(--m-exterior);
}

.icon--sm {
  --icon-size: 1rem;
}

.icon--lg {
  --icon-size: 2rem;
}