.eui-icon-svg {
    fill: currentColor;
    margin: 0;
    transform: scaleX(1) scaleY(1) rotateZ(0deg);
    transition: transform 300ms ease-in-out;
    display: inline-flex;
    align-items: center;
}
@each $size, $value in $eui-base-tokens-icon-sizes {
    .eui-icon-svg--size-#{$size} {
        height: #{$value};
        width: #{$value};
    };
}
@each $color, $shades in $eui-base-tokens-colors {
    @each $shade, $value in $shades {
        .eui-icon-svg--color-#{$color + '-' + $shade} {
            color: #{$value};
            fill: #{$value};
        };
    }
}
@each $color, $value in $eui-base-tokens-colors-100s {
    .eui-icon-svg--color-#{'' + $color} {
        color: #{$value};
        fill: #{$value};
    };
}

.eui-icon-svg--color-white {
    color: white;
    fill: white;
}

.eui-icon-svg--color-black {
    color: black;
    fill: black;
}

.eui-icon-svg--color-transparent {
    color: transparent !important;  // important is important for isLoading
    fill: transparent !important;
}
