// scss-docs-start ouds-font-icon-common
%icon-size {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  fill: currentcolor;
}
// scss-docs-end ouds-font-icon-common

@each $font-ref, $font-name in $ouds-font-sizes {
  @each $icon-size in $ouds-icon-sizes {
    @if str-slice($font-name, 1, 5) != "/code" {
      .#{$font-ref}-#{$icon-size}-icon {
        @extend %icon-size;
        font-size: var(--#{$prefix}icon-#{$icon-size}-with-#{str-slice($font-name, 2)}) if($enable-important-utilities, !important, null);
      }
    }
  }
}

.decorative-4xsmall-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-4xsmall if($enable-important-utilities, !important, null);
}

.decorative-3xsmall-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-3xsmall if($enable-important-utilities, !important, null);
}

.decorative-2xsmall-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-2xsmall if($enable-important-utilities, !important, null);
}

.decorative-xsmall-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-xsmall if($enable-important-utilities, !important, null);
}

.decorative-small-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-small if($enable-important-utilities, !important, null);
}

.decorative-medium-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null);
}

.decorative-large-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-large if($enable-important-utilities, !important, null);
}

.decorative-xlarge-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-xlarge if($enable-important-utilities, !important, null);
}

.decorative-2xlarge-icon {
  @extend %icon-size;
  font-size: $ouds-size-icon-decorative-2xlarge if($enable-important-utilities, !important, null);
}