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

/**
 * @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-c-button-neutral-color-background: var(
    --slds-c-button-stateful-color-background-selected,
    transparent
  );
  --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]) {
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-stateful-color-background-selected-hover,
      var(--slds-g-color-surface-container-2)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-stateful-color-border-selected-hover,
      var(--slds-g-color-border-1)
    );
  }

  &:active:not([disabled]) {
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-stateful-color-background-selected-active,
      var(--slds-g-color-surface-container-2)
    );
  }
}

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

/**
 * The Aura text variant adds .slds-button_reset to the button.
 * Override slds-button_reset behavior to ensure proper text color inheritance.
 */
.slds-button_stateful.slds-button_reset {
  color: var(--slds-c-button-text-color, var(--slds-s-button-color, var(--slds-g-color-accent-2)));

  &:hover {
    color: var(
      --slds-c-button-text-color-hover,
      var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
    );
  }

  &:active {
    color: var(--slds-c-button-text-color-active, var(--slds-g-color-accent-3));
  }

  &:focus-visible {
    color: var(
      --slds-c-button-text-color-hover,
      var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
    );
  }

  &[disabled],
  &:disabled {
    color: var(--slds-g-color-on-disabled-1);
  }
}
/**
  * 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;
    }
  }
}