// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import '../mixins/index';

/**
 * The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class.
 *
 * The stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class.
 *
 * Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated.
 *
 * #### Accessibility
 *
 * For accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept.
 * - Similar to a mute button, the button represents a pressed or unpressed state.
 * - Button text doesn't change per state
 * - `aria-pressed` is set to `true` or `false`, depending its state
 *
 * @summary Stateful Button Icon
 * @name stateful
 * @selector .slds-is-selected
 * @restrict .slds-button_icon
 * @support dev-ready
 * @variant
 * @lwc
 */
.slds-button_icon-container.slds-is-selected,
.slds-button--icon-container.slds-is-selected,
.slds-button_icon-border.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 {
  @include button-icon-brand;

  .slds-button__icon {
    fill: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand});
  }

  &:hover,
  &:focus {

    .slds-button__icon {
      fill: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand});
    }
  }

  &:focus {
    box-shadow: var(--_slds-g-shadow-outset-focus);
    outline: 0;
  }

  &[disabled],
  &:disabled {
    background: var(--slds-g-color-neutral-base-80, #{$brand-disabled});
    border-color: var(--slds-g-color-neutral-base-80, #{$brand-disabled});
    color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled});
  }
}