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

/* Base — unlayered structural CSS. Participates in normal cascade; wins over any layered CSS. */

/* All icon button variants: structural overrides from .slds-button base.
   Each variant compound is root-anchored to .slds-button so the BEM
   modifier rule selectors don't leak via cascade. */
.slds-button.slds-button_icon,
.slds-button.slds-button_icon-inverse,
.slds-button.slds-button_icon-container,
.slds-button.slds-button_icon-border,
.slds-button.slds-button_icon-border-filled,
.slds-button.slds-button_icon-border-inverse,
.slds-button.slds-button_icon-more,
.slds-button.slds-button_icon-error,
.slds-button.slds-button_icon-warning {
  line-height: 1;
  vertical-align: middle;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;

  /* The SVG inside an icon-button carries `.slds-button__icon` only
     (the LBC doesn't stamp `.slds-icon` here), so the icon's own paint
     rule in `icon/themes/base.css` never matches. Read the icon hook
     into `fill` directly on the same element; the forward from
     button-icon hook → icon hook lives in each theme file. */
  .slds-button__icon {
    fill: var(--slds-c-icon-color-foreground, currentColor);
  }
}

/**
 * @summary Default width + height for button icon with containers
 */
.slds-button.slds-button_icon-container,
.slds-button.slds-button_icon-border,
.slds-button.slds-button_icon-border-filled,
.slds-button.slds-button_icon-border-inverse,
.slds-button.slds-button_icon-brand,
.slds-button.slds-button_icon-more,
.slds-button.slds-button_icon-container-more {
  /* Sizing cascade: dimension hooks fall back to the unified container size. */
  width: var(--slds-c-button-icon-container-size);
  height: var(--slds-c-button-icon-container-size);
}

/**
 * @summary Apply the current color to the icon contained within
 */
.slds-button.slds-button_icon-current-color {
  color: currentColor;
}

/**
 * @summary Changes a button icon container to be 48x48px
 * Size modifiers appear after container classes; source order ensures modifier wins at equal specificity.
 */
.slds-button.slds-button_icon-large {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-container-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-container-size));
}

.slds-button.slds-button_icon-large .slds-button__icon {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-size));
}

/**
 * @summary Changes a button icon container to be 24x24px
 */
.slds-button.slds-button_icon-small {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-container-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-container-size));
}

/**
 * @summary Changes a button icon container to be 20x20px
 */
.slds-button.slds-button_icon-x-small {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-container-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-container-size));
  line-height: 1;
}

.slds-button.slds-button_icon-x-small .slds-button__icon {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-size));
}

/**
 * @summary Changes a button icon container to be 16x16px
 */
.slds-button.slds-button_icon-xx-small {
  width: var(--slds-c-button-icon-container-sizing-width, var(--slds-c-button-icon-container-size));
  height: var(--slds-c-button-icon-container-sizing-height, var(--slds-c-button-icon-container-size));
  line-height: 1;
}

.slds-button.slds-button_icon-xx-small .slds-button__icon {
  width: var(--slds-c-button-icon-size);
  height: var(--slds-c-button-icon-size);
}

/**
 * @summary Creates a button menu icon container that has borders and a filled background
 */
.slds-button.slds-button_icon-more {
  width: auto;
  line-height: var(--slds-c-button-icon-more-font-line-height);
  /* Block axis: zero on both directions; literal shorthand sidesteps
     the direction-with-axis-fallback contract (no hook surface here). */
  padding-block: 0;
  padding-inline-start: var(
    --slds-c-button-icon-more-spacing-inline-start,
    var(--slds-c-button-icon-more-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-button-icon-more-spacing-inline-end,
    var(--slds-c-button-icon-more-spacing-inline)
  );
}

/**
 * @summary Creates a button menu icon container that has no borders
 */
.slds-button.slds-button_icon-container-more {
  width: auto;
  line-height: var(--slds-c-button-icon-more-font-line-height);
  padding-block: 0;
  padding-inline-start: var(
    --slds-c-button-icon-more-spacing-inline-start,
    var(--slds-c-button-icon-more-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-button-icon-more-spacing-inline-end,
    var(--slds-c-button-icon-more-spacing-inline)
  );
  vertical-align: middle;
}

/**
 * @summary Hint variants: a parent class signals the hint child should
 * react when the parent is hovered. The bare BEM-element selectors are
 * root-anchored under `.slds-button` so the rule only matches inside an
 * actual button.
 */
.slds-button .slds-button__icon_hint {
  fill: var(--slds-c-button-icon-hint-color-foreground);
}

.slds-button .slds-button__icon_inverse-hint {
  fill: var(--slds-c-button-icon-inverse-hint-color-foreground);
}

/* Hint-parent: composition context changes fill on hover/focus.
   `slds-hint-parent` is the documented parent-context wrapper for the
   "child reacts when parent is hovered/focused" pattern; its writes
   ride the same allow-list as form-state contexts. */
.slds-hint-parent:hover .slds-button .slds-button__icon_hint,
.slds-hint-parent:focus .slds-button .slds-button__icon_hint {
  fill: var(--slds-c-button-icon-hint-color-foreground);
}

.slds-hint-parent:hover .slds-button .slds-button__icon_inverse-hint,
.slds-hint-parent:focus .slds-button .slds-button__icon_inverse-hint {
  fill: var(--slds-c-button-icon-inverse-hint-color-foreground);
}

.slds-hint-parent:hover .slds-button:disabled .slds-button__icon_hint,
.slds-hint-parent:focus .slds-button:disabled .slds-button__icon_hint {
  fill: currentColor;
}

/**
 * Error state on the form wrapper. The error/warning variants
 * themselves now drive the inner SVG fill via a layered forward in
 * each theme file (`.slds-button_icon-{error,warning} .slds-icon`
 * writes `--slds-c-icon-color-foreground`); the icon's own paint rule
 * in `icon/themes/base.css` consumes it. This `.slds-has-error` block
 * stays unlayered because it imposes a structural form-error context
 * on top of any variant.
 */
.slds-has-error .slds-button .slds-button__icon {
  fill: var(--slds-c-button-icon-error-color-foreground);
  color: var(--slds-c-button-icon-error-color-foreground);
}