$icon-prefix: 'icon';
$icon-config: (
  'xxs': (
    min-width: 0.75rem,
    min-height: 0.75rem,
    font-size: 0.75rem,
  ),
  'xs': (
    min-width: 1rem,
    min-height: 1rem,
    font-size: 1rem,
  ),
  'sm': (
    min-width: 1.25rem,
    min-height: 1.25rem,
    font-size: 1.25rem,
  ),
  'md': (
    min-width: 1.25rem,
    min-height: 1.25rem,
    font-size: 1.25rem,
  ),
  'lg': (
    min-width: 1.5rem,
    min-height: 1.5rem,
    font-size: 1.5rem,
  ),
  'xl': (
    min-width: 1.75rem,
    min-height: 1.75rem,
    font-size: 1.75rem,
  ),
  'xxl': (
    min-width: 2em,
    min-height: 2rem,
    font-size: 2rem,
  ),
);

%icon {
  align-items: center;
  display: flex;
  gap: 4px;
  position: relative;
  @each $size, $value in $icon-config {
    &-#{$size} {
      &::before,
      &::after {
        @each $prop-name, $prop-value in $value {
          --#{$icon-prefix}-#{$size}-#{$prop-name}: #{$prop-value};
          #{$prop-name}: var(--#{$icon-prefix}-#{$size}-#{$prop-name});
        }
      }
    }
  }

  &::before {
    // margin-left: -2px;margin-leftmargin-leftmargin-left
  }

  &::after {
    // content: none;contentcontentcontent
    // margin-right: 2px;margin-rightmargin-rightmargin-right
  }

  &-left {
    &::before {
      content: '';
    }

    &::after {
      content: none;
    }
  }

  &-right {
    &::before {
      content: none;
    }

    &::after {
      // content: '';contentcontentcontent
    }

    &-outline {
      &::before {
        right: 0;
      }
    }
  }
}

[class^='#{$icon-prefix}'],
[class*=' #{$icon-prefix}'] {
  @extend %icon;

  &:empty {
    justify-content: center;
    margin: 0;
    padding: 0;

    &::before,
    &::after {
      margin: 0;
    }
  }
}

@each $size, $value in $icon-config {
  [class^='#{$icon-prefix}-#{$size}'],
  [class*=' #{$icon-prefix}-#{$size}'] {
    @extend %icon-#{$size};
  }
}

[class^='#{$icon-prefix}-right'],
[class*=' #{$icon-prefix}-right'] {
  @extend %icon-right;
}

[class^='#{$icon-prefix}-left'],
[class*=' #{$icon-prefix}-left'] {
  @extend %icon-left;
}