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

.ouiButtonGroupButton {
  @include ouiButtonBase;
  @include ouiFont;
  @include ouiFontSizeS;

  // sass-lint:disable-block indentation
  transition: background-color $ouiAnimSpeedNormal ease-in-out,
              border-color $ouiAnimSpeedNormal ease-in-out,
              color $ouiAnimSpeedNormal ease-in-out;

  // Allow button to shrink and truncate
  min-width: 0;
  flex-shrink: 1;
  flex-grow: 0;

  .ouiButton__content {
    padding: 0 $ouiSizeM;
  }

  &-isIconOnly .ouiButton__content {
    padding: 0 $ouiSizeS;
  }

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

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

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

  &.ouiButtonGroupButton-isDisabled {
    @include ouiButtonContentDisabled;
    color: $ouiButtonColorDisabledText;

    &.ouiButtonGroupButton-isSelected {
      color: makeHighContrastColor($ouiButtonColorDisabled, $ouiButtonColorDisabled, 2);
      background-color: $ouiButtonColorDisabled;
      border-color: $ouiButtonColorDisabled;

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

  @each $name, $color in $ouiButtonTypes {
    &.ouiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
      @if ($name == 'ghost') {
        // Ghost is unique and ALWAYS sits against a dark background.
        // Compressed styles don't support ghost color, it defaults to the text color
        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);
      }

      &.ouiButtonGroupButton-isSelected {
        background-color: $color;
        border-color: $color;

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

        color: $fillTextColor;

        &:hover,
        &:focus,
        &:focus-within {
          $darkHighlightBg: darken($color, 5%);

          background-color: $darkHighlightBg;
          border-color: $darkHighlightBg;
        }
      }

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

.ouiButtonGroupButton__textShift {
  @include ouiTextShift;
}

/**
 * Medium and Small sizing (regular button style)
 */

.ouiButtonGroup--medium,
.ouiButtonGroup--small {
  .ouiButtonGroupButton {
    border: $ouiBorderThin;

    &:not(:first-child) {
      margin-left: -1px;
    }

    &:first-child {
      border-radius: $ouiBorderRadius 0 0 $ouiBorderRadius;
    }

    &:last-child {
      border-radius: 0 $ouiBorderRadius $ouiBorderRadius 0;
    }
  }

  // Fix ghost/disabled look specifically
  .ouiButtonGroupButton.ouiButtonGroupButton-isDisabled.ouiButtonGroupButton--ghost {
    &,
    &:hover,
    &:focus,
    &:focus-within {
      color: $ouiButtonColorGhostDisabled;
    }

    .ouiButtonGroup--isDisabled & {
      border-color: $ouiButtonColorGhostDisabled;
    }

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

  .ouiButtonGroupButton-isSelected {
    z-index: 0;
  }

  .ouiButtonGroupButton-isSelected + .ouiButtonGroupButton-isSelected {
    box-shadow: -1px 0 0 transparentize($ouiColorEmptyShade, .9);
  }
}

/**
 * Compressed (form style)
 */

.ouiButtonGroup--compressed {
  .ouiButtonGroupButton {
    height: $ouiFormControlCompressedHeight - 2px;
    line-height: $ouiFormControlCompressedHeight - 2px; // prevents descenders from getting cut off
    font-size: $ouiFontSizeS;
    border-radius: $ouiBorderRadius;
    // Offset the background color from the border by 2px
    // by clipping background to before the padding starts
    padding: 2px;
    background-clip: content-box;

    .ouiButton__content {
      padding-left: $ouiSizeS;
      padding-right: $ouiSizeS;
    }

    &.ouiButtonGroupButton-isSelected {
      font-weight: $ouiFontWeightSemiBold;
    }

    &:not([class*='isDisabled']) {
      &:focus,
      &:focus-within {
        outline: 2px solid $ouiFocusRingColor;
      }
    }
  }
}