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

@layer theme {
  /* Forward the button-icon foreground hook into the icon's own
     foreground hook on the inner SVG. base.css consumes
     `--slds-c-icon-color-foreground` into `fill`. */
  .slds-button .slds-button__icon {
    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground);
  }

  /**
   * All icon button variants: suppress inherited hover background; set default foreground.
   */
  .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 {
    --slds-c-button-color-background-hover: transparent;
    --slds-c-button-color-foreground: var(--slds-g-color-on-surface-1);
  }

  /**
   * Focus shadow: bare and standalone icon variant
   */
  .slds-button.slds-button_icon:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1);
  }

  /**
   * Focus shadow: bordered and container variants
   */
  .slds-button.slds-button_icon-inverse:focus-visible,
  .slds-button.slds-button_icon-container:focus-visible,
  .slds-button.slds-button_icon-border:focus-visible,
  .slds-button.slds-button_icon-border-filled:focus-visible,
  .slds-button.slds-button_icon-border-inverse:focus-visible,
  .slds-button.slds-button_icon-more:focus-visible,
  .slds-button.slds-button_icon-error:focus-visible,
  .slds-button.slds-button_icon-warning:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1);
  }

  /**
   * Container sizing defaults
   */
  .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 {
    --slds-c-button-icon-container-size: var(--slds-g-sizing-9);
  }

  /**
   * @summary Transparent themed button icon — border with a transparent background
   */
  .slds-button.slds-button_icon-border-filled,
  .slds-button.slds-button_icon-border {
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-color-border: var(--slds-g-color-border-2);
  }

  .slds-button.slds-button_icon-border-filled:hover,
  .slds-button.slds-button_icon-border:hover {
    --slds-c-button-color-background-hover: transparent;
    --slds-c-button-color-border-hover: var(--slds-g-color-border-2);
  }

  .slds-button.slds-button_icon-border-filled:focus-visible,
  .slds-button.slds-button_icon-border:focus-visible {
    --slds-c-button-color-border-focus: var(--slds-g-color-border-2);
  }

  .slds-button.slds-button_icon-border-filled:active,
  .slds-button.slds-button_icon-border:active {
    --slds-c-button-color-border-active: var(--slds-g-color-border-2);
  }

  .slds-button.slds-button_icon-border-filled[disabled],
  .slds-button.slds-button_icon-border-filled:disabled,
  .slds-button.slds-button_icon-border[disabled],
  .slds-button.slds-button_icon-border:disabled {
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /**
   * @summary Button icon with border and transparent background, for use on inversed backgrounds
   */
  .slds-button.slds-button_icon-border-inverse {
    --slds-c-button-color-background: transparent;
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-color-border: var(--slds-g-color-border-inverse-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-surface-inverse-1);
  }

  .slds-button.slds-button_icon-border-inverse:hover {
    --slds-c-button-color-foreground-hover: var(
      --slds-c-button-inverse-color-foreground-hover,
      var(--slds-g-color-accent-3)
    );
    --slds-c-button-color-background-hover: var(
      --slds-c-button-inverse-color-background-hover,
      var(--slds-g-color-surface-container-2)
    );
  }

  .slds-button.slds-button_icon-border-inverse:active {
    --slds-c-button-color-foreground-active: var(
      --slds-c-button-inverse-color-foreground-hover,
      var(--slds-g-color-accent-3)
    );
  }

  .slds-button.slds-button_icon-border-inverse[disabled],
  .slds-button.slds-button_icon-border-inverse:disabled {
    --slds-c-button-color-background-disabled: transparent;
    --slds-c-button-color-border-disabled: color-mix(
      in oklab,
      var(--slds-g-color-neutral-base-100),
      transparent 75%
    );
    --slds-c-button-color-foreground-disabled: color-mix(
      in oklab,
      var(--slds-g-color-on-surface-inverse-1),
      transparent 75%
    );
  }

  /**
   * @summary Branded button icon — filled background with the brand color
   */
  .slds-button.slds-button_icon-brand {
    --slds-c-button-color-background: var(--slds-g-color-accent-container-1);
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-accent-1);
  }

  .slds-button.slds-button_icon-brand:visited,
  .slds-button.slds-button_icon-brand:active {
    --slds-c-button-color-foreground-active: var(--slds-g-color-on-accent-1);
  }

  .slds-button.slds-button_icon-brand:hover {
    --slds-c-button-color-background-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-on-accent-2);
  }

  .slds-button.slds-button_icon-brand:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1);
  }

  .slds-button.slds-button_icon-brand:active {
    --slds-c-button-color-background-active: var(--slds-g-color-accent-container-3);
    --slds-c-button-color-border-active: var(--slds-g-color-accent-container-3);
  }

  .slds-button.slds-button_icon-brand[disabled],
  .slds-button.slds-button_icon-brand:disabled {
    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /**
   * @summary Neutral themed button icon — border with a filled background
   */
  .slds-button.slds-button_icon-border-filled {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
  }

  .slds-button.slds-button_icon-border-filled:hover,
  .slds-button.slds-button_icon-border-filled:focus-visible {
    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
  }

  .slds-button.slds-button_icon-border-filled[disabled],
  .slds-button.slds-button_icon-border-filled:disabled {
    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
  }

  /**
   * @summary Bare button icon for use on an inversed background
   */
  .slds-button.slds-button_icon-inverse {
    --slds-c-button-color-foreground: var(--slds-g-color-on-surface-inverse-1);
  }

  .slds-button.slds-button_icon-inverse:hover {
    --slds-c-button-color-background-hover: transparent;
  }

  .slds-button.slds-button_icon-inverse:focus-visible {
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
  }

  /**
   * @summary Error state — used in conjunction with an error tooltip
   *
   * Each state selector writes both the button foreground and the
   * button-icon foreground directly (no -hover/-active suffix). The
   * unlayered forward in `base.css` propagates
   * `--slds-c-button-icon-color-foreground` into the rendered SVG fill
   * via `--slds-c-icon-color-foreground`.
   */
  .slds-button.slds-button_icon-error {
    --slds-c-button-color-foreground: var(--slds-g-color-error-1);
    --slds-c-button-icon-color-foreground: var(--slds-g-color-error-1);
  }

  .slds-button.slds-button_icon-error:hover,
  .slds-button.slds-button_icon-error:focus-visible,
  .slds-button.slds-button_icon-error:active {
    --slds-c-button-color-foreground: var(--slds-g-color-error-1);
    --slds-c-button-icon-color-foreground: var(--slds-g-color-error-2);
  }

  .slds-button.slds-button_icon-error:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1);
  }

  .slds-button.slds-button_icon-error[disabled],
  .slds-button.slds-button_icon-error:disabled {
    --slds-c-button-icon-color-foreground: var(--slds-g-color-on-disabled-2);
  }

  /**
   * @summary Warning state — used in conjunction with a warning tooltip
   */
  .slds-button.slds-button_icon-warning {
    --slds-c-button-color-foreground: var(--slds-g-color-warning-1);
    --slds-c-button-icon-color-foreground: var(--slds-g-color-warning-1);
  }

  .slds-button.slds-button_icon-warning:hover,
  .slds-button.slds-button_icon-warning:focus-visible,
  .slds-button.slds-button_icon-warning:active {
    --slds-c-button-color-foreground: var(--slds-g-color-warning-1);
    --slds-c-button-icon-color-foreground: var(--slds-g-color-warning-2);
  }

  .slds-button.slds-button_icon-warning:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1);
  }

  .slds-button.slds-button_icon-warning[disabled],
  .slds-button.slds-button_icon-warning:disabled {
    --slds-c-button-icon-color-foreground: var(--slds-g-color-on-disabled-2);
  }

  /**
   * @summary Creates a button menu icon container that has borders and a filled background
   */
  .slds-button.slds-button_icon-more {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-2);
    --slds-c-button-icon-more-font-line-height: 1.875rem;
    --slds-c-button-icon-more-spacing-inline: var(--slds-g-spacing-2);
  }

  .slds-button.slds-button_icon-more:hover {
    --slds-c-button-color-foreground-hover: var(--slds-g-color-accent-2);
  }

  .slds-button.slds-button_icon-more:active {
    --slds-c-button-color-foreground-active: var(--slds-g-color-accent-3);
  }

  .slds-button.slds-button_icon-more[disabled],
  .slds-button.slds-button_icon-more:disabled {
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-disabled-1);
  }

  /**
   * @summary Creates a button menu icon container that has no borders
   */
  .slds-button.slds-button_icon-container-more {
    --slds-c-button-icon-more-font-line-height: 1.875rem;
    --slds-c-button-icon-more-spacing-inline: var(--slds-g-spacing-2);
  }

  /**
   * @summary Bare button icon — focus and active adjustments
   */
  .slds-button.slds-button_icon-bare:focus-visible,
  .slds-button.slds-button_icon-bare:active {
    --slds-c-button-radius-border: var(--slds-g-radius-border-2);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1);
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
  }

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

  /**
   * Hint selectors: default fill values. Anchored under .slds-button so
   * the BEM-element write doesn't leak to non-button descendants.
   */
  .slds-button .slds-button__icon_hint {
    --slds-c-button-icon-hint-color-foreground: var(--slds-g-color-on-surface-1);
  }

  .slds-button .slds-button__icon_inverse-hint {
    --slds-c-button-icon-inverse-hint-color-foreground: color-mix(
      in oklab,
      var(--slds-g-color-on-surface-inverse-1),
      transparent 50%
    );
  }

  /* Hint-parent context: border and fill overrides for interactive states */
  .slds-hint-parent .slds-button.slds-button_icon-border-inverse {
    --slds-c-button-color-border: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 50%);
  }

  .slds-hint-parent .slds-button.slds-button_icon-border-inverse:focus {
    --slds-c-button-color-border: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%);
  }

  .slds-hint-parent:hover .slds-button.slds-button_icon-border-inverse,
  .slds-hint-parent:focus .slds-button.slds-button_icon-border-inverse {
    --slds-c-button-color-border: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%);
  }

  .slds-hint-parent:hover .slds-button .slds-button__icon_hint,
  .slds-hint-parent:focus .slds-button .slds-button__icon_hint {
    --slds-c-button-icon-hint-color-foreground: var(--slds-g-color-on-surface-2);
  }

  .slds-hint-parent:hover .slds-button .slds-button__icon_inverse-hint,
  .slds-hint-parent:focus .slds-button .slds-button__icon_inverse-hint {
    --slds-c-button-icon-inverse-hint-color-foreground: color-mix(
      in oklab,
      var(--slds-g-color-on-surface-inverse-1),
      transparent 25%
    );
  }

  /* Selected states */
  .slds-button.slds-button_icon-container.slds-is-selected,
  .slds-button.slds-button_icon-border.slds-is-selected,
  .slds-button.slds-button_icon-border-filled.slds-is-selected,
  .slds-button.slds-button_icon-border-inverse.slds-is-selected {
    --slds-c-button-color-background: var(--slds-g-color-accent-container-1);
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-accent-1);
  }

  .slds-button.slds-button_icon-container.slds-is-selected:hover,
  .slds-button.slds-button_icon-container.slds-is-selected:focus,
  .slds-button.slds-button_icon-border.slds-is-selected:hover,
  .slds-button.slds-button_icon-border.slds-is-selected:focus,
  .slds-button.slds-button_icon-border-filled.slds-is-selected:hover,
  .slds-button.slds-button_icon-border-filled.slds-is-selected:focus,
  .slds-button.slds-button_icon-border-inverse.slds-is-selected:hover,
  .slds-button.slds-button_icon-border-inverse.slds-is-selected:focus {
    --slds-c-button-color-background-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-on-accent-2);
  }

  .slds-button.slds-button_icon-container.slds-is-selected[disabled],
  .slds-button.slds-button_icon-container.slds-is-selected:disabled,
  .slds-button.slds-button_icon-border.slds-is-selected[disabled],
  .slds-button.slds-button_icon-border.slds-is-selected:disabled,
  .slds-button.slds-button_icon-border-filled.slds-is-selected[disabled],
  .slds-button.slds-button_icon-border-filled.slds-is-selected:disabled,
  .slds-button.slds-button_icon-border-inverse.slds-is-selected[disabled],
  .slds-button.slds-button_icon-border-inverse.slds-is-selected:disabled {
    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /**
   * Size modifiers — assigned after container defaults; source order ensures modifier wins at equal specificity.
   */
  .slds-button.slds-button_icon-large {
    --slds-c-button-icon-container-size: var(--slds-g-sizing-10);
    --slds-c-button-icon-size: var(--slds-g-sizing-7);
  }

  .slds-button.slds-button_icon-small {
    --slds-c-button-icon-container-size: var(--slds-g-sizing-7);
  }

  .slds-button.slds-button_icon-x-small {
    --slds-c-button-icon-container-size: var(--slds-g-sizing-6);
    --slds-c-button-icon-size: var(--slds-g-sizing-4);
  }

  .slds-button.slds-button_icon-xx-small {
    --slds-c-button-icon-container-size: var(--slds-g-sizing-5);
    --slds-c-button-icon-size: var(--slds-g-sizing-3);
  }

  /* Error state icon */
  .slds-has-error .slds-button .slds-button__icon {
    --slds-c-button-icon-error-color-foreground: var(--slds-g-color-error-1);
  }
}