/*!
 * 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.
 */

// This file has lots of modifiers and is somewhat nesty by nature
// sass-lint:disable nesting-depth

.ouiButtonIcon {
  @include ouiButton;
  @include ouiSlightShadow;

  border-radius: $ouiBorderRadius;
  width: $ouiButtonHeight;

  // Ensures center alignment of any sized icon inside buttons and anchors
  display: inline-flex;
  align-items: center;
  justify-content: space-around;

  & > svg {
    // prevents the element and its children from receiving any pointer events to fix not bubbling click event in Safari
    // https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element
    pointer-events: none;
  }

  &.ouiButtonIcon--empty {
    box-shadow: none !important; // sass-lint:disable-line no-important
    border: none;
  }

  &.ouiButtonIcon-isDisabled {
    @include ouiButtonContentDisabled;
    color: $ouiButtonColorDisabledText;
    border-color: $ouiButtonColorDisabled;

    &.ouiButtonIcon--fill {
      // Only increase the contrast of background color to text to 2.0 for disabled
      color: makeHighContrastColor($ouiButtonColorDisabled, $ouiButtonColorDisabled, 2);
      background-color: $ouiButtonColorDisabled;
      border-color: $ouiButtonColorDisabled;

      &:hover,
      &:focus,
      &:focus-within {
        background-color: $ouiButtonColorDisabled;
        border-color: $ouiButtonColorDisabled;
      }
    }

    &:hover,
    &:focus,
    &:focus-within {
      @include ouiSlightShadow;
      text-decoration: none;
    }
  }
}

.ouiButtonIcon--xSmall {
  height: $ouiButtonHeightXSmall;
  width: $ouiButtonHeightXSmall;
}

.ouiButtonIcon--small {
  height: $ouiButtonHeightSmall;
  width: $ouiButtonHeightSmall;
}

// Create button modifiers based upon the map.
@each $name, $color in $ouiButtonTypes {
  .ouiButtonIcon--#{$name} {
    @if ($name == 'ghost') {
      // Ghost is unique and ALWAYS sits against a dark background.
      color: $color;
    } @else if ($name == 'text') {
      // The default color is lighter than the normal text color, make the it the text color
      color: $ouiTextColor;
    } @else {
      // Other colors need to check their contrast against the page background color.
      color: makeHighContrastColor($color, $ouiPageBackgroundColor);
    }

    border-color: $color;

    &.ouiButtonIcon--fill {
      background-color: $color;
      border-color: $color;

      // The function makes that hexes safe for theming
      $fillTextColor: chooseLightOrDarkText($color, $ouiColorGhost, $ouiColorInk);

      color: $fillTextColor;

      &:not([class*='isDisabled']) {
        &:hover,
        &:focus,
        &:focus-within {
          background-color: darken($color, 5%);
          border-color: darken($color, 5%);
        }

        &:active {
          @include ouiSlightShadowActive(darken($color, 10%), .4);
        }
      }
    }

    &:not([class*='isDisabled']) {
      $shadowColor: $ouiShadowColor;
      @if ($name == 'ghost') {
        $shadowColor: $ouiColorInk;
      } @else if (lightness($ouiTextColor) < 50) {
        // Only if this is the light theme do we use the button variant color to colorize the shadow
        $shadowColor: desaturate($color, 60%);
      }

      @include ouiSlightShadow($shadowColor);

      &:hover,
      &:focus,
      &:focus-within {
        @include ouiSlightShadowHover($shadowColor);
        background-color: transparentize($color, .9);
      }

      &:active {
        @include ouiSlightShadowActive($color);
      }
    }
  }
}

// Fix ghost/disabled look specifically
.ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost {
  &,
  &:hover,
  &:focus,
  &:focus-within {
    @include ouiSlightShadow($ouiColorInk);
    color: $ouiButtonColorGhostDisabled;
    border-color: $ouiButtonColorGhostDisabled;
  }

  &.ouiButton--fill {
    background-color: $ouiButtonColorGhostDisabled;
    color: makeHighContrastColor($ouiButtonColorGhostDisabled, $ouiButtonColorGhostDisabled, 2);
  }
}