.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($euiColorSecondary);
  }
}

.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;
  }
}

// App icon special cases for fully mono
.euiIcon--text,
.euiIcon--subdued,
.euiIcon--primary,
.euiIcon--customColor {
  &,
  .euiIcon__fillSecondary {
    fill: currentColor;
  }
}

// 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;
  }
}