_icon.scss

.euiIcon {
  flex-shrink: 0; // Ensures it never scales down below its intended size
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transform: translate(0, 0); // Hack to fix Firefox "softness"

  &:focus {
    opacity: 1; // We often hide icons on hover. Make sure they appear on focus.
    background: $euiFocusBackgroundColor;
  }
}

// App icons are two-toned so get an extra class. This provides the base color.
.euiIcon--app {
  fill: $euiTextColor;

  // This provides the default secondary color
  .euiIcon__fillSecondary {
    fill: makeGraphicContrastColor($euiColorSuccess);
  }
}

.euiIcon-isLoading {
  opacity: $euiIconLoadingOpacity;
  background-color: currentColor;
  border-radius: $euiBorderRadius;
}

.euiIcon-isLoaded {
  animation: euiIconLoading $euiAnimSpeedNormal ease-in 0s 1 forwards;
}

// COLORS

@each $name, $color in $euiIconColors {
  .euiIcon--#{$name} {
    // Use color attribute so currentColor can be used in more properties
    color: $color;
  }
}

// Really force all paths to inherit when the color is ghost/text (specifically for logos)
.euiIcon--ghost:not([data-type='logoElastic']),
.euiIcon--text:not([data-type='logoElastic']) {
  *[fill],
  .euiIcon__fillNegative {
    fill: currentColor !important; // sass-lint:disable-line no-important
  }
}

// Elastic logo specific colors
.euiIcon--ghost[data-type='logoElastic'],
.euiIcon--text[data-type='logoElastic'] {
  *[fill] {
    fill: none !important; // sass-lint:disable-line no-important
  }

  .outline {
    fill: currentColor !important; // sass-lint:disable-line no-important
  }
}

// Use the negative fill on SVG elements that need to flip portions
// of the icon to light and dark compatible modes. You can see this
// in use on the Elastic logo icons.
.euiIcon__fillNegative {
  fill: $euiColorDarkestShade;
}

// SIZES

@each $name, $size in $euiIconSizes {
  .euiIcon--#{$name} {
    @include size($size);
  }
}

@keyframes euiIconLoading {
  0% {
    opacity: $euiIconLoadingOpacity;
  }

  100% {
    opacity: 1;
  }
}