// 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';

/**
 * @summary Initiates a dual stateful button
 * @name dual-stateful
 * @selector .slds-button_dual-stateful
 * @restrict button
 * @support dev-ready
 * @variant
 */
.slds-button_dual-stateful {
  /**
   * @summary Shown text when button is not pressed - default state
   * @selector .slds-text-not-pressed
   * @restrict .slds-button_dual-stateful span
   */
  .slds-text-not-pressed {
    display: block;
  }

  /**
   * @summary Shown text when button is pressed
   * @selector .slds-text-pressed
   * @restrict .slds-button_dual-stateful span
   */
  .slds-text-pressed {
    display: none;
  }
}

/**
 * @summary When button is in pressed state
 * @selector .slds-is-pressed
 * @restrict .slds-button_dual-stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-button_dual-stateful.slds-is-pressed {
  /**
   * Styling Hooks uses button-brand identifier instead of button_dual-stateful
   * because dual stateful is a brand variant underneath the hood and therefore
   * should pick up any styling customizations made to the brand variant.
   */
  @include button-shape(brand);

  /*! @css-var-fallback background-color */
  --slds-c-button-color-background:
    var(--slds-c-button-dual-stateful-color-background-selected,
    var(--slds-c-button-brand-color-background,
    var(--sds-c-button-brand-color-background, #{$brand-accessible})));

  /*! @css-var-fallback border-color */
  --slds-c-button-color-border:
    var(--slds-c-button-dual-stateful-color-border-selected,
    var(--slds-c-button-brand-color-border,
    var(--sds-c-button-brand-color-border, #{$brand-accessible})));

  /*! @css-var-fallback color */
  --slds-c-button-text-color:
    var(--slds-c-button-dual-stateful-text-color-selected,
    var(--slds-c-button-brand-text-color,
    var(--sds-c-button-brand-text-color, var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary}))));

  --slds-c-button-text-color-hover: 
    var(--slds-c-button-dual-stateful-text-color-selected-hover,
    var(--slds-c-button-brand-text-color-hover,
    var(--sds-c-button-brand-text-color-hover,
    var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary}))));

  // Since dual-stateful has a high specificity, we have to be explicit with pseudo-class
  &:focus,
  &:hover {
    /*! @css-var-fallback background-color */
    --slds-c-button-dual-stateful-color-background-selected:
      var(--slds-c-button-dual-stateful-color-background-selected-hover,
      var(--slds-c-button-brand-color-background-hover,
      var(--sds-c-button-brand-color-background-hover, #{$brand-accessible-active})));

    /*! @css-var-fallback border-color */
    --slds-c-button-dual-stateful-color-border-selected:
      var(--slds-c-button-dual-stateful-color-border-selected-hover,
      var(--slds-c-button-brand-color-border-hover,
      var(--sds-c-button-brand-color-border-hover, #{$brand-accessible-active})));

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

    --slds-c-button-dual-stateful-text-color-selected-hover:
      var(--slds-c-button-brand-text-color-hover,
      var(--sds-c-button-brand-text-color-hover,
      var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary})));
  }

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

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

  .slds-text-pressed {
    display: block;
  }
}