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

.slds-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--slds-c-button-spacing-gap);
  /* Spacing cascade: Direction → Axis (direction-specific falls back to axis-level) */
  padding-block-start: var(--slds-c-button-spacing-block-start, var(--slds-c-button-spacing-block));
  padding-inline-end: var(--slds-c-button-spacing-inline-end, var(--slds-c-button-spacing-inline));
  padding-block-end: var(--slds-c-button-spacing-block-end, var(--slds-c-button-spacing-block));
  padding-inline-start: var(--slds-c-button-spacing-inline-start, var(--slds-c-button-spacing-inline));
  background-color: var(--slds-c-button-color-background);
  border-radius: var(--slds-c-button-radius-border);
  border-color: var(--slds-c-button-color-border, transparent);
  border-width: var(--slds-c-button-sizing-border, 0);
  border-style: solid;
  color: var(--slds-c-button-color-foreground);
  line-height: var(--slds-c-button-font-line-height);
  font-size: var(--slds-c-button-font-size);
  font-weight: var(--slds-c-button-font-weight);
  text-decoration: none;
  white-space: normal;
  font-family: inherit;
  user-select: none;
  appearance: none;

  &:hover,
  &:focus-visible,
  &:active,
  &:visited {
    text-decoration: none;
  }

  &:link,
  &:visited {
    color: var(--slds-c-button-color-foreground);
  }

  &:hover {
    background-color: var(--slds-c-button-color-background-hover);
    color: var(--slds-c-button-color-foreground-hover);
    border-color: var(--slds-c-button-color-border-hover, transparent);
  }

  &:focus-visible {
    background-color: var(--slds-c-button-color-background-focus);
    color: var(--slds-c-button-color-foreground-focus);
    border-color: var(--slds-c-button-color-border-focus, transparent);
  }

  &:active {
    background-color: var(--slds-c-button-color-background-active);
    color: var(--slds-c-button-color-foreground-active);
    border-color: var(--slds-c-button-color-border-active, transparent);
  }

  &[disabled],
  &:disabled {
    background-color: var(--slds-c-button-color-background-disabled);
    color: var(--slds-c-button-color-foreground-disabled);
    border-color: var(--slds-c-button-color-border-disabled, transparent);
    cursor: default;
    pointer-events: none;

    * {
      pointer-events: none;
    }
  }

  &:hover,
  &:focus-visible,
  &:active,
  &[disabled],
  &:disabled {
    .slds-button__icon {
      pointer-events: none;
    }
  }

  /* Modifiers */
  /* Resets attributes of .slds-button to look like & conform to surrounding text */
  &.slds-button_reset {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: inherit;
  }

  /* Creates a button style for 100% width with centered text that maintains current styling */
  &.slds-button_stretch {
    justify-content: center;
    width: 100%;
  }

  /* Creates a button style for full width that resets styling */
  &.slds-button_full-width {
    color: inherit;
    line-height: inherit;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: inherit;
    width: 100%;
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
  }

  /* Two-tier icon resolution: button's per-button hook wins, then icon's
     canonical hook, then the legacy default. Defaults must live inside
     the var() chain — an unconditional declaration on `.slds-button`
     would shadow the icon-tier fallback.

     Per-state paint reads only the button-namespaced hook: icon has no
     per-state hook surface to fall back to. */
  .slds-button__icon {
    width: var(--slds-c-button-icon-size, var(--slds-c-icon-size));
    height: var(--slds-c-button-icon-size, var(--slds-c-icon-size));
    fill: var(--slds-c-button-icon-color-foreground, var(--slds-c-icon-color-foreground, currentColor));
  }

  /* Per-state icon foreground tracks the parent button's state. The
     `currentColor` fallback keeps the icon following the label's color
     cascade when no theme assigns an explicit per-state icon hook. */
  &:hover .slds-button__icon {
    fill: var(--slds-c-button-icon-color-foreground-hover, currentColor);
  }

  &:focus-visible .slds-button__icon {
    fill: var(--slds-c-button-icon-color-foreground-focus, currentColor);
  }

  &:active .slds-button__icon {
    fill: var(--slds-c-button-icon-color-foreground-active, currentColor);
  }

  &[disabled] .slds-button__icon,
  &:disabled .slds-button__icon {
    fill: var(--slds-c-button-icon-color-foreground-disabled, currentColor);
  }
}