/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

// sass-lint:disable no-vendor-prefixes no-qualifying-elements nesting-depth

$splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);

.ouiSplitButton {

  //width: 100% !important;

  // Remove individual button style
  //@eslint
  button.ouiSplitButtonControl--primary {
    // reset all but right border
    border-top-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: $ouiBorderWidthThin;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;

    &:hover,
    &:active,
    &:focus {
      -webkit-transform: none;
      transform: none;
    }
  }

  button.ouiSplitButtonControl--dropdown {
    border-width: 0px;
    border-radius: 0px;

    &:hover,
    &:active,
    &:focus {
      -webkit-transform: none;
      transform: none;
    }
  }

  .ouiSplitButtonControl {
    border: $ouiBorderWidthThick solid $ouiBorderColor;
    border-radius: $ouiBorderRadius;
  }

  // Create button modifiers based upon the map.
  @each $name, $color in $ouiButtonTypes {
    .ouiSplitButtonHairline--#{$name} {
      &:not([class*='isDisabled']) {

        border-right-color: transparentize($color, .8);
      }


      &.ouiSplitButtonHairline--filled {
        &:not([class*='isDisabled']) {
          border-right-color: darken($color, 10%);
        }
      }
    }
  }


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

      &.ouiSplitButtonColor--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%);
          }
        }
      }

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

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

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


}