// Lightning Design System 2.8.0
// 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
 */
.slds-button_neutral.slds-is-selected,
.slds-button--neutral.slds-is-selected {
  border-color: transparent;
  background-color: transparent;

  &:hover:not([disabled]),
  &:focus:not([disabled]) {
    border-color: $button-color-border-primary;
    background-color: $color-background-button-default-hover;
  }

  &:active:not([disabled]) {
    background-color: $color-background-button-default-active;
  }
}

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

/**
 * 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: block;
  }
}

/**
 * @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: block;
  }

  .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: block;
  }

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

  &:hover,
  &:focus {

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

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

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