.euiButtonGroupButton {
  @include euiButtonBase;
  @include euiFont;
  @include euiFontSize;

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

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

  .euiButton__content {
    padding: 0 $euiSizeM;
  }

  &-isIconOnly .euiButton__content {
    padding: 0 $euiSizeS;
  }

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

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

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

  &.euiButtonGroupButton-isDisabled {
    @include euiButtonContentDisabled;
    color: $euiButtonColorDisabledText;

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

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

  @each $name, $color in $euiButtonTypes {
    &.euiButtonGroupButton--#{$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: $euiTextColor;
      } @else {
        // Other colors need to check their contrast against the page background color.
        color: makeHighContrastColor($color, $euiPageBackgroundColor);
      }

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

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

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

.euiButtonGroupButton__textShift {
  @include euiTextShift;
}

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

.euiButtonGroup--medium,
.euiButtonGroup--small {
  .euiButtonGroupButton {
    border: $euiBorderThin;

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

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

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

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

    .euiButtonGroup--isDisabled & {
      border-color: $euiButtonColorGhostDisabled;
    }

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

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

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

/**
 * Compressed (form style)
 */

.euiButtonGroup--compressed {
  .euiButtonGroupButton {
    height: $euiFormControlCompressedHeight - 2px;
    line-height: $euiFormControlCompressedHeight - 2px; // prevents descenders from getting cut off
    font-size: $euiFontSizeS;
    border-radius: $euiBorderRadius;
    // Offset the background color from the border by 2px
    // by clipping background to before the padding starts
    padding: 2px;
    background-clip: content-box;

    .euiButton__content {
      padding-left: $euiSizeS;
      padding-right: $euiSizeS;
    }

    &.euiButtonGroupButton-isSelected {
      font-weight: $euiFontWeightSemiBold;
    }

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