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

// Our base button
.ouiButton {
  @include ouiButton;
  @include ouiSlightShadow;

  border-radius: $ouiBorderRadius;
  min-width: $ouiButtonMinWidth;

  .ouiButton__content {
    padding: 0 ($ouiSize - $ouiSizeXS);
  }

  .ouiButton__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.ouiButton--small {
    height: $ouiButtonHeightSmall;
    line-height: $ouiButtonHeightSmall; // prevents descenders from getting cut off
  }

  &:hover,
  &:active {
    @include ouiSlightShadowHover;
  }

  &:not([class*='isDisabled']) {
    &:hover,
    &:focus,
    &:focus-within {
      background-color: transparentize($ouiColorPrimary, .9);
    }
  }

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

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

// Create button modifiers based upon the map.
@each $name, $color in $ouiButtonTypes {
  .ouiButton--#{$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;

    &.ouiButton--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
.ouiButton.ouiButton-isDisabled.ouiButton--ghost {
  &,
  &:hover,
  &:focus,
  &:focus-within {
    @include ouiSlightShadow($ouiColorInk);
    color: $ouiButtonColorGhostDisabled;
    border-color: $ouiButtonColorGhostDisabled;
  }

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

.ouiButton--fullWidth {
  display: block;
  width: 100%;
}