.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: var(--eui-base-color-#{$color + '-' + $shade});
            fill: var(--eui-base-color-#{$color + '-' + $shade});
        };
    }
}

.eui-icon-svg--color-white {
    color: var(--eui-base-color-white);
    fill: var(--eui-base-color-white);
}

.eui-icon-svg--color-black {
    color: var(--eui-base-color-black);
    fill: var(--eui-base-color-black);
}

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