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

.slds-button_icon,
.slds-button_icon-inverse,
.slds-button_icon-container,
.slds-button_icon-border,
.slds-button_icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button_icon-more,
.slds-button_icon-error,
.slds-button_icon-warning {
  /**
   * SLDS2 buttons have a possible shared button background color. Button icons
   * are often integrated into an experience component and do not expect a background
   * color on hover which may cause regressions if not prevented.
   */
  --slds-c-button-color-background-hover: none;

  line-height: 1;
  vertical-align: middle;
  justify-content: center;
  color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));
  flex-shrink: 0;
  padding: 0;
}

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

.slds-button_icon-inverse,
.slds-button_icon-container,
.slds-button_icon-border,
.slds-button_icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button_icon-more,
.slds-button_icon-error,
.slds-button_icon-warning {
  &:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1);
  }
}

/**
 * @summary Default width + height for button icon with containers
 */
.slds-button_icon-container,
.slds-button_icon-border,
.slds-button_icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button_icon-brand,
.slds-button_icon-more,
.slds-button_icon-container-more {
  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);
}

/**
 * @summary Transparent themed button icon - Button icon has a border with a transparent background
 */
.slds-button_icon-border-filled,
.slds-button_icon-border {
  line-height: 1;
  vertical-align: middle;
  color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
  transition: border 0.15s linear;

  &[disabled],
  &:disabled {
    border-color: var(--slds-g-color-border-disabled-1);
    color: var(--slds-g-color-on-disabled-2);
  }

  &:focus-visible {
    border-color: var(--slds-c-button-color-border);
    transition: none;
  }

  &:hover {
    box-shadow: var(--slds-s-button-bordered-shadow-hover);
    transform: var(--slds-s-button-bordered-transform-hover);
    transition:
      transform 150ms ease-in-out,
      box-shadow 150ms ease-in-out;
  }

  &:active {
    transform: none;
    box-shadow:
      0 0 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-30)),
      var(--slds-s-button-shadow-active, revert);
    transition:
      transform 150ms ease-in-out,
      box-shadow 150ms ease-in-out;
  }
}

/**
 * @summary Button icon with border and transparent background, to be used on an inversed background
 */
.slds-button_icon-border-inverse {
  background-color: transparent;
  border-color: var(--slds-g-color-border-inverse-1);
  color: var(--slds-g-color-on-surface-inverse-1);
  transition:
    transform 150ms ease-in-out,
    box-shadow 150ms ease-in-out;

  &:hover {
    color: var(--slds-c-button-inverse-text-color-hover, var(--slds-g-color-accent-3));
    background-color: var(
      --slds-c-button-inverse-color-background-hover,
      var(--slds-g-color-surface-container-2)
    );
    box-shadow: var(--slds-c-button-inverse-shadow-hover);
    transform: var(--slds-s-button-bordered-transform-hover);
  }

  &:active {
    color: var(--slds-c-button-inverse-text-color-hover, var(--slds-g-color-accent-3));
    box-shadow:
      0 0 0 transparent,
      var(--slds-s-button-shadow-active, revert);
    transform: none;
  }

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

/**
 * @summary Bare button icon - Button icon has a solid icon with no background and no border
 */
.slds-button_icon-bare {
  &:focus-visible,
  &:active {
    --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_icon-inverse:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1);
  }

  &:focus-visible {
    border-radius: var(--_slds-c-buttonicon-bare-radius-focus);
  }
}

/**
 * @summary Branded button icon - Button icon has a filled background with the brand color
 */
.slds-button_icon-brand {
  background-color: var(--slds-g-color-accent-container-1);
  border-color: var(--slds-g-color-border-accent-1);
  color: var(--slds-g-color-on-accent-1);

  &:visited,
  &:active {
    color: var(--slds-g-color-on-accent-1);
  }

  &:hover {
    background-color: var(--slds-g-color-accent-container-2);
    border-color: var(--slds-g-color-accent-container-2);
    box-shadow: var(--slds-s-button-brand-shadow-hover);
    color: var(--slds-g-color-on-accent-2);
    transform: var(--slds-s-button-brand-transform-hover);
    transition:
      transform 150ms ease-in-out,
      box-shadow 150ms ease-in-out;
  }

  &:focus-visible {
    --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1);

    border-color: var(--slds-c-button-color-border);
  }

  &:active {
    background-color: var(--_slds-c-buttonicon-brand-color-background-active);
    border-color: var(--slds-g-color-accent-container-3);
    border-width: var(--_slds-c-buttonicon-brand-sizing-border-active, var(--slds-g-sizing-border-1));
    transform: none;
    box-shadow:
      0 0 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-30)),
      var(--slds-s-button-shadow-active, revert);
    transition:
      transform 150ms ease-in-out,
      box-shadow 150ms ease-in-out;
  }

  &[disabled],
  &:disabled {
    background: var(--slds-g-color-disabled-container-2);
    border-color: var(--slds-g-color-border-disabled-1);
    color: var(--slds-g-color-on-disabled-2);
  }
}

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

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

  &[disabled],
  &:disabled {
    border-color: var(--slds-g-color-border-disabled-1);
    background-color: var(--slds-g-color-disabled-container-1);
  }
}

/**
 * @summary Bare button icon with no border or background, to be used on an inversed background
 */
.slds-button_icon-inverse {
  color: var(--slds-g-color-on-surface-inverse-1);

  &:hover {
    --slds-c-button-color-background-hover: transparent;

    color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
  }

  &:focus-visible {
    outline: none;
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-inverse-1);
    border-color: transparent;

    --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1);
  }

  &:active {
    color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50%);
  }

  &[disabled],
  &:disabled {
    color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%);
  }
}

/**
 * @summary Error state - Typically used in conjunction with an error toolip
 */
.slds-button_icon-error {
  color: var(--slds-g-color-error-1);

  &:hover,
  &:active,
  &:focus-visible {
    color: var(--slds-g-color-error-1);
  }

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

/**
 * @summary Warning state - Typically used in conjunction with an warning tooltip
 */
.slds-button_icon-warning {
  color: var(--slds-g-color-warning-1);

  &:hover,
  &:active,
  &:focus-visible {
    color: var(--slds-g-color-warning-1);
  }

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

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

/**
 * @summary Changes a button icon container to be 48x48px
 */
.slds-button_icon-large {
  width: var(--slds-g-sizing-10);
  height: var(--slds-g-sizing-10);

  .slds-button__icon {
    width: var(--slds-g-sizing-7);
    height: var(--slds-g-sizing-7);
  }
}

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

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

  .slds-button__icon {
    width: var(--slds-g-sizing-4);
    height: var(--slds-g-sizing-4);
  }
}

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

  .slds-button__icon {
    width: var(--slds-g-sizing-3);
    height: var(--slds-g-sizing-3);
  }
}

/**
 * @summary Creates a button menu icon container that has borders and a filled background
 */
.slds-button_icon-more {
  width: auto;
  line-height: 1.875rem;
  padding: 0 var(--slds-g-spacing-2);
  background-color: var(--slds-g-color-surface-container-1);
  border-color: var(--slds-g-color-border-2);
  color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));

  &:hover {
    .slds-button__icon {
      fill: var(--slds-s-button-color-hover, var(--slds-g-color-accent-2));
    }
  }

  &:active .slds-button__icon {
    fill: var(--slds-g-color-accent-3);
  }

  &[disabled],
  &:disabled {
    cursor: default;

    .slds-button__icon {
      fill: var(--slds-g-color-disabled-1);
    }
  }

  &:focus-visible {
    border-color: transparent;
  }
}

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

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.
 */
.slds-button__icon_hint {
  fill: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));
}

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.
 */
.slds-button__icon_inverse-hint {
  fill: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50%);
}

/* Handles hint on hover behavior of an inverse button icon, both bordered and non-bordered */
.slds-hint-parent {
  .slds-button_icon-border-inverse {
    border-color: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 50%);

    &:focus {
      border-color: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%);
    }
  }

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

    .slds-button__icon_hint {
      fill: var(--slds-g-color-on-surface-2);
    }

    .slds-button__icon_inverse-hint {
      fill: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
    }

    .slds-button:disabled {
      .slds-button__icon_hint {
        fill: currentColor;
      }
    }
  }
}

.slds-button_icon-container.slds-is-selected,
.slds-button_icon-border.slds-is-selected,
.slds-button_icon-border-filled.slds-is-selected,
.slds-button_icon-border-inverse.slds-is-selected {
  background-color: var(--slds-g-color-accent-container-1);
  border-color: var(--slds-g-color-border-accent-1);
  color: var(--slds-g-color-on-accent-1);

  &:not([disabled]):hover {
    box-shadow: var(--slds-s-button-brand-shadow-hover);
    transform: var(--slds-s-button-brand-transform-hover);
  }

  &:not([disabled]):active {
    box-shadow:
      0 0 0 0 transparent,
      var(--slds-s-button-shadow-active, revert);
    transform: none;
  }

  &:hover,
  &:focus {
    background-color: var(--slds-g-color-accent-container-2);
    border-color: var(--slds-g-color-accent-container-2);
    color: var(--slds-g-color-on-accent-2);
  }
}

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

/**
 * Error state
 */

.slds-has-error .slds-button__icon {
  fill: var(--slds-g-color-error-1);
  color: var(--slds-g-color-error-1);
}