.fsa-icon {

  & {

    fill: currentColor;
    width: $icon-size-2;
    height: $icon-size-2;
    vertical-align: middle;
    flex-shrink: 0;

    h1 > &,
    h2 > &,
    h3 > &,
    h4 > &,
    h5 > &,
    h6 > & {
      position: relative;
      vertical-align: middle;
      top: -2px;
      display: inline-block;
      margin-right: 2px;
    }

  }

  &--size-auto { width: $icon-size-auto; height: $icon-size-auto; }
  &--size-0    { width: $icon-size-0;    height: $icon-size-0; }
  &--size-1    { width: $icon-size-1;    height: $icon-size-1; }
  &--size-2    { width: $icon-size-2;    height: $icon-size-2; }
  &--size-3    { width: $icon-size-3;    height: $icon-size-3; }
  &--size-4    { width: $icon-size-4;    height: $icon-size-4; }
  &--size-5    { width: $icon-size-5;    height: $icon-size-5; }
  &--size-6    { width: $icon-size-6;    height: $icon-size-6; }
  &--custom    { --custom-icon-size: $icon-size-1; width: var(--custom-icon-size); height: var(--custom-icon-size); }

  @include breakpoint(S) {
    &--size-auto\@s  { width: $icon-size-auto; height: $icon-size-auto; }
    &--size-1\@s     { width: $icon-size-1; height: $icon-size-1; }
    &--size-2\@s     { width: $icon-size-2; height: $icon-size-2; }
    &--size-3\@s     { width: $icon-size-3; height: $icon-size-3; }
    &--size-4\@s     { width: $icon-size-4; height: $icon-size-4; }
    &--size-5\@s     { width: $icon-size-5; height: $icon-size-5; }
    &--size-6\@s     { width: $icon-size-6; height: $icon-size-6; }
    &--custom\@s { --custom-icon-size-s:  $icon-size-1; width: var(--custom-icon-size-s);  height: var(--custom-icon-size-s); }
  }

  @include breakpoint(M) {
    &--size-auto\@m { width: $icon-size-auto; height: $icon-size-auto; }
    &--size-1\@m    { width: $icon-size-1; height: $icon-size-1; }
    &--size-2\@m    { width: $icon-size-2; height: $icon-size-2; }
    &--size-3\@m    { width: $icon-size-3; height: $icon-size-3; }
    &--size-4\@m    { width: $icon-size-4; height: $icon-size-4; }
    &--size-5\@m    { width: $icon-size-5; height: $icon-size-5; }
    &--size-6\@m    { width: $icon-size-6; height: $icon-size-6; }
    &--custom\@m { --custom-icon-size-m:  $icon-size-1; width: var(--custom-icon-size-m);  height: var(--custom-icon-size-m); }
  }

  @include breakpoint(L) {
    &--size-auto\@l { width: $icon-size-auto; height: $icon-size-auto; }
    &--size-1\@l    { width: $icon-size-1; height: $icon-size-1; }
    &--size-2\@l    { width: $icon-size-2; height: $icon-size-2; }
    &--size-3\@l    { width: $icon-size-3; height: $icon-size-3; }
    &--size-4\@l    { width: $icon-size-4; height: $icon-size-4; }
    &--size-5\@l    { width: $icon-size-5; height: $icon-size-5; }
    &--size-6\@l    { width: $icon-size-6; height: $icon-size-6; }
    &--custom\@l { --custom-icon-size-l:  $icon-size-1; width: var(--custom-icon-size-l);  height: var(--custom-icon-size-l); }
  }

  @include breakpoint(XL) {
    &--size-auto\@xl { width: $icon-size-auto; height: $icon-size-auto; }
    &--size-1\@xl    { width: $icon-size-1; height: $icon-size-1; }
    &--size-2\@xl    { width: $icon-size-2; height: $icon-size-2; }
    &--size-3\@xl    { width: $icon-size-3; height: $icon-size-3; }
    &--size-4\@xl    { width: $icon-size-4; height: $icon-size-4; }
    &--size-5\@xl    { width: $icon-size-5; height: $icon-size-5; }
    &--size-6\@xl    { width: $icon-size-6; height: $icon-size-6; }
    &--custom\@xl{ --custom-icon-size-xl: $icon-size-1; width: var(--custom-icon-size-xl); height: var(--custom-icon-size-xl); }
  }

  // IE11 subtle workaround
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .fsa-btn &,
    .fsa-btn-group &,
    .fsa-stepped-tabs &,
    .fsa-nav-global__text &,
    .fsa-content-tabs & {
      margin-left: math.div($size-base, 2);
      margin-right: $size-base;
    }
  }

}