/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

.slds-button-group,
.slds-button-group-list {
  display: inline-flex;

  .slds-button {
    border-radius: 0;
    border-width: var(--slds-g-sizing-border-1);

    /* Button CSS adds margin between adjacent buttons for standalone use.
       Reset it here since grouped buttons should be flush. */
    & + .slds-button {
      margin-inline-start: 0;
    }

    &:focus {
      z-index: 1;
    }

    &:focus-visible {
      --slds-c-button-shadow-focus: none;

      outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
      outline-offset: -2px;
      z-index: 1;
    }

    &.slds-button_icon-bare:focus-visible {
      --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1);

      outline: 0;
    }

    &.slds-button_destructive,
    &.slds-button_success,
    &.slds-button_brand,
    &.slds-button_icon-brand,
    &.slds-is-selected {
      &:focus-visible {
        box-shadow: inset 0 0 0 3px var(--slds-g-color-neutral-base-100);
      }
    }

    &.slds-button_inverse,
    &.slds-button_icon-inverse {
      &:focus-visible {
        outline-color: var(--slds-g-color-neutral-base-95);
      }
    }
  }
  .slds-button_neutral,
  .slds-button_outline-brand,
  .slds-button_destructive,
  .slds-button_text-destructive,
  .slds-button_success,
  .slds-button_icon-border,
  .slds-button_icon-border-filled {
    &[disabled],
    &:disabled {
      border-color: var(--slds-g-color-border-2);
    }
  }

  .slds-dropdown-trigger {
    display: inline-flex;
  }
}

/* Remove right border from all buttons except the last one.
   The visual divider comes from the next button's left border. */
.slds-button-group .slds-button:not(:last-child, .slds-button_last),
.slds-button-group .slds-button + .slds-button_last,
.slds-button-group-list li:not(:last-child) .slds-button {
  border-inline-end-width: 0;
}

/* Add space when a brand button is next to a brand icon button dropdown or a brand button */
.slds-button-group .slds-button_brand + .slds-button_last .slds-button_icon-brand,
.slds-button-group-list li:last-child .slds-button_icon-brand,
.slds-button-group .slds-button_brand + .slds-button_brand {
  box-shadow: inset 1px 0 0 var(--slds-g-color-neutral-base-100);
}

/* These selectors must remain in long hand in order to zero out borders that we don't want on last-child buttons */
.slds-button-group-list li:first-child .slds-button,
.slds-button-group .slds-button:first-child {
  border-start-start-radius: var(--slds-s-button-radius-border);
  border-start-end-radius: 0;
  border-end-start-radius: var(--slds-s-button-radius-border);
  border-end-end-radius: 0;
  border-inline-end-width: 0;
}

/**
  * @summary If the last button in the group is required to be wrapped in a div, apply this class to the div
  * @selector .slds-button_last
  * @restrict .slds-button-group div, .slds-button-group-list div
  */
.slds-button-group .slds-button:last-child,
.slds-button-group-list li:last-child .slds-button,
.slds-button-group .slds-button_last .slds-button,
.slds-button-group .slds-button.slds-button_last,
.slds-button-group .slds-button_last .slds-button:only-child {
  border-start-start-radius: 0;
  border-start-end-radius: var(--slds-s-button-radius-border);
  border-end-start-radius: 0;
  border-end-end-radius: var(--slds-s-button-radius-border);
}

/* The following rule must stay at the **bottom** due to the cascade */
.slds-button-group .slds-button:only-child,
.slds-button-group-list li:only-child .slds-button {
  border-radius: var(--slds-s-button-radius-border);
  border-inline-end-width: var(--slds-g-sizing-border-1);
}

/* The following is a temporary fix for style encapsulation */

.slds-button.slds-button_first.slds-button_first {
  border-start-start-radius: var(--slds-s-button-radius-border);
  border-start-end-radius: 0;
  border-end-start-radius: var(--slds-s-button-radius-border);
  border-end-end-radius: 0;
  border-inline-end-width: 0;
}

.slds-button.slds-button_middle.slds-button_middle {
  border-radius: 0;
  border-inline-end-width: 0;
}

.slds-button.slds-button_last.slds-button_last {
  border-start-start-radius: 0;
  border-start-end-radius: var(--slds-s-button-radius-border);
  border-end-start-radius: 0;
  border-end-end-radius: var(--slds-s-button-radius-border);
}

.slds-button-group + .slds-button-group,
.slds-button-group + .slds-button-group-list,
.slds-button-group + .slds-button,
.slds-button-group-list + .slds-button-group-list,
.slds-button-group-list + .slds-button-group,
.slds-button-group-list + .slds-button {
  margin-inline-start: var(--slds-g-spacing-2);
}

.slds-button-group-row {
  display: inline-flex;

  .slds-button-group-item + .slds-button-group-item {
    margin-inline-start: var(--slds-g-spacing-2);
  }

  .slds-button-group-item .slds-button {
    margin: 0;
  }
}