/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiIcon {
  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: $ouiFocusBackgroundColor;
  }
}

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

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

.ouiIcon-isLoading {
  opacity: $ouiIconLoadingOpacity;
  background-color: currentColor;
  border-radius: $ouiBorderRadius;
}

.ouiIcon-isLoaded {
  animation: ouiIconLoading $ouiAnimSpeedNormal ease-in 0s 1 forwards;
}

// COLORS

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

// App icon special cases for fully mono
.ouiIcon--text,
.ouiIcon--subdued,
.ouiIcon--primary,
.ouiIcon--customColor {
  &,
  .ouiIcon__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.
.ouiIcon__fillNegative {
  fill: $ouiColorDarkestShade;
}

// SIZES

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

@keyframes ouiIconLoading {
  0% {
    opacity: $ouiIconLoadingOpacity;
  }

  100% {
    opacity: 1;
  }
}