// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:map";
@import "../../common/variables";
@import "../forms/common";
@import "./common";

// z-index values for button stacking order (derived from $control-group-stack in forms/_common.scss)
$button-group-z-index: (
  "button-disabled": 3,
  "button-default": 4,
  "button-focus": 5,
  "button-hover": 6,
  "button-active": 7,
  "intent-button-disabled": 8,
  "intent-button-default": 9,
  "intent-button-focus": 10,
  "intent-button-hover": 11,
  "intent-button-active": 12,
);

.#{$ns}-button-group {
  display: inline-flex;

  .#{$ns}-button {
    // ensure button can never be smaller than its default size
    flex: 0 0 auto;
    position: relative;
    z-index: map.get($button-group-z-index, "button-default");

    // the ordering of these z-index CSS rules is particular because of CSS
    // selector specificity. specifically, disabled styles should have
    // precedence over hover and active styles to prevent mouse interactions on
    // disabled buttons from reordering elements in the stack.

    &:focus {
      z-index: map.get($button-group-z-index, "button-focus");
    }

    &:hover {
      z-index: map.get($button-group-z-index, "button-hover");
    }

    &:active,
    &.#{$ns}-active {
      z-index: map.get($button-group-z-index, "button-active");
    }

    &:disabled,
    &.#{$ns}-disabled {
      z-index: map.get($button-group-z-index, "button-disabled");
    }

    &[class*="#{$ns}-intent-"] {
      z-index: map.get($button-group-z-index, "intent-button-default");

      &:focus {
        z-index: map.get($button-group-z-index, "intent-button-focus");
      }

      &:hover {
        z-index: map.get($button-group-z-index, "intent-button-hover");
      }

      &:active,
      &.#{$ns}-active {
        z-index: map.get($button-group-z-index, "intent-button-active");
      }

      &:disabled,
      &.#{$ns}-disabled {
        z-index: map.get($button-group-z-index, "intent-button-disabled");
      }
    }
  }

  // support wrapping buttons in a tooltip, which adds a wrapper element
  &:not(.#{$ns}-minimal),
  &.#{$ns}-outlined {
    > .#{$ns}-popover-wrapper:not(:first-child) .#{$ns}-button,
    > .#{$ns}-popover-target:not(:first-child) > .#{$ns}-button,
    > .#{$ns}-button:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
    > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button,
    > .#{$ns}-button:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &:not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
    > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button,
    > .#{$ns}-button:not(:last-child) {
      margin-right: calc(-1 * var(--bp-surface-border-width));
    }
  }

  &.#{$ns}-minimal,
  &.#{$ns}-outlined {
    .#{$ns}-button {
      @include pt-button-minimal;
    }

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      // Because we give even minimal buttons a border in high contrast mode, we need to handle border styles
      // similar to how we handle non-minimal buttons

      &:not(:first-child) {
        border-bottom-left-radius: 0;
        border-left: none;
        border-top-left-radius: 0;
      }

      &:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        margin-right: calc(-1 * var(--bp-surface-border-width));
      }
    }
  }

  &.#{$ns}-outlined {
    > .#{$ns}-button,
    > .#{$ns}-popover-target > .#{$ns}-button {
      @include pt-button-outlined;
    }

    &:not(.#{$ns}-vertical) {
      > .#{$ns}-button:not(:last-child),
      > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button {
        border-right: none;
      }
    }
  }

  .#{$ns}-popover-wrapper,
  .#{$ns}-popover-target {
    display: flex;
    flex: 1 1 auto;
  }

  &.#{$ns}-fill {
    display: flex;
    width: 100%;
  }

  .#{$ns}-button.#{$ns}-fill,
  &.#{$ns}-fill .#{$ns}-button:not(.#{$ns}-fixed) {
    flex: 1 1 auto;
  }

  &.#{$ns}-vertical {
    align-items: stretch;
    flex-direction: column;
    vertical-align: top;

    &.#{$ns}-fill {
      height: 100%;
      width: unset;
    }

    .#{$ns}-button {
      // we never want that margin-right when vertical
      margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
      // needed to ensure buttons take up the full width when wrapped in a Popover:
      width: 100%;
    }

    &:not(.#{$ns}-minimal),
    &.#{$ns}-outlined {
      > .#{$ns}-popover-wrapper:first-child .#{$ns}-button,
      > .#{$ns}-popover-target:first-child > .#{$ns}-button,
      > .#{$ns}-button:first-child {
        border-radius: var(--bp-surface-border-radius) var(--bp-surface-border-radius) 0 0;
      }

      > .#{$ns}-popover-wrapper:last-child .#{$ns}-button,
      > .#{$ns}-popover-target:last-child > .#{$ns}-button,
      > .#{$ns}-button:last-child {
        border-radius: 0 0 var(--bp-surface-border-radius) var(--bp-surface-border-radius);
      }
    }

    &:not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
      > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button,
      > .#{$ns}-button:not(:last-child) {
        margin-bottom: calc(-1 * var(--bp-surface-border-width));
      }
    }

    &.#{$ns}-outlined {
      > .#{$ns}-button:not(:last-child),
      > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button {
        border-bottom: none;
      }
    }
  }

  &.#{$ns}-align-left .#{$ns}-button {
    text-align: left;
  }
}