// 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 Initializes checkbox button
 *
 * @name base
 * @selector .slds-checkbox-button
 * @restrict label
 * @support dev-ready
 * @variant
 */
.slds-checkbox-button {
  @include square($square-icon-medium-boundary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$button-color-border-primary});
  border-radius: $button-border-radius;
  color: var(--slds-g-color-brand-base-30, #{$color-brand-darker}); // Controls icon fill, not meant for text, faux Styling Hooks
  cursor: pointer;
}

/**
* @summary Modifier for the checked state
* @name is-checked
* @selector .slds-checkbox-button_is-checked
* @restrict .slds-checkbox-button
* @modifier
*/
.slds-checkbox-button_is-checked {
  background-color: var(--slds-g-color-brand-base-30, #{$color-brand-darker});
  border-color: transparent;
  color: var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary}); // Controls icon fill, not meant for text, faux Styling Hooks
}

/**
* @summary Modifier for the disabled state
* @name is-disabled
* @selector .slds-checkbox-button_is-disabled
* @restrict .slds-checkbox-button
* @modifier
*/
.slds-checkbox-button_is-disabled {
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-button-default-disabled});
  border-color: var(--slds-g-color-border-base-1, #{$button-color-border-primary});
  color: var(--slds-g-color-neutral-base-80, #{$color-text-icon-default-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks
  cursor: default;

  // If checked && disabled
  &.slds-checkbox-button_is-checked {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-brand-disabled});
    border-color: var(--slds-g-color-neutral-base-80, #{$color-border-button-brand-disabled});
    color: var(--slds-g-color-neutral-base-50, #{$color-text-button-brand-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks
  }
}

/**
* @summary Modifier for the focused state
* @name is-focused
* @selector .slds-checkbox-button_is-focused
* @restrict .slds-checkbox-button
* @modifier
*/
.slds-checkbox-button_is-focused {
  box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
}