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

@import 'deprecate';

/**
 * @summary Initiates a stateful button
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict button
 * @support dev-ready
 * @variant
 * @lwc
 */
.slds-button_neutral.slds-is-selected,
.slds-button--neutral.slds-is-selected {
  /*! @css-var-fallback background-color */
  --slds-c-button-neutral-color-background: var(--slds-c-button-stateful-color-background-selected, transparent);

  /*! @css-var-fallback border-color */
  --slds-c-button-neutral-color-border: var(--slds-c-button-stateful-color-border-selected, transparent);

  /**
   * Styling Hooks uses button-neutral identifier instead of button_stateful
   * because stateful is a neutral variant underneath the hood and therefore
   * should pick up any styling customizations made to the brand variant.
   */
  &:hover:not([disabled]),
  &:focus:not([disabled]) {
    /*! @css-var-fallback background-color */
    --slds-c-button-neutral-color-background-hover: var(--slds-c-button-stateful-color-background-selected-hover, var(--slds-g-color-neutral-base-95, #{$color-background-button-default-hover}));

    /*! @css-var-fallback border-color */
    --slds-c-button-neutral-color-border-hover: var(--slds-c-button-stateful-color-border-selected-hover, var(--slds-g-color-border-base-1, #{$color-border-primary}));
  }

  &:active:not([disabled]) {
    /*! @css-var-fallback background-color */
    --slds-c-button-neutral-color-background-active: var(--slds-c-button-stateful-color-background-selected-active, var(--slds-g-color-neutral-base-95, #{$color-background-button-default-active}));
  }
}

// Inverse Button
.slds-button_inverse.slds-is-selected,
.slds-button--inverse.slds-is-selected {
  border-color: transparent;
}

.slds-button_stateful .slds-text-selected,
.slds-button_stateful .slds-text-selected-focus,
.slds-button_stateful .slds-text-not-selected {
  align-items: center;
}

/**
 * Default state of a stateful button
 *
 * @selector .slds-not-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-not-selected {
  /**
   * @summary Shown text when button is selected
   * @selector .slds-text-selected
   * @restrict .slds-button_stateful span
   */
  .slds-text-selected {
    display: none;
  }

  /**
   * @summary Shown text when button is selected and focused
   * @selector .slds-text-selected-focus
   * @restrict .slds-button_stateful span
   */
  .slds-text-selected-focus {
    display: none;
  }

  /**
   * @summary Shown text when button is not selected - default state
   * @selector .slds-text-not-selected
   * @restrict .slds-button_stateful span
   */
  .slds-text-not-selected {
    display: inline-flex;
  }
}

/**
 * @summary When button is selected and still has focus from click
 * @selector .slds-is-selected-clicked
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-is-selected-clicked,
.slds-is-selected[disabled],
.slds-is-selected[disabled]:hover,
.slds-is-selected[disabled]:focus {

  .slds-text-selected {
    display: inline-flex;
  }

  .slds-text-selected-focus {
    display: none;
  }

  .slds-text-not-selected {
    display: none;
  }
}

/**
 * @summary When button is pressed and selected
 * @selector .slds-is-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-is-selected {

  .slds-text-not-selected {
    display: none;
  }

  .slds-text-selected {
    display: inline-flex;
  }

  .slds-text-selected-focus {
    display: none;
  }

  &:hover,
  &:focus {

    .slds-text-not-selected {
      display: none;
    }

    .slds-text-selected {
      display: none;
    }

    .slds-text-selected-focus {
      display: inline-flex;
    }
  }
}