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

@supports (--styling-hooks: '') {
  /* :host::part(button-icon-stateful), */
  :host([data-render-mode="shadow"]) [part~='button-icon-stateful'] {
    display: inline-flex;
    color: var(--slds-c-buttoniconstateful-color-foreground);

    /* Default */
    --slds-c-buttonicon-sizing: var(--slds-c-buttoniconstateful-sizing);

    --slds-c-buttonicon-color-foreground: var(--slds-c-buttoniconstateful-color-foreground);
    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-buttoniconstateful-color-foreground-hover);
    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-buttoniconstateful-color-foreground-focus);
    --slds-c-buttonicon-color-foreground-active: var(--slds-c-buttoniconstateful-color-foreground-active);

    --slds-c-buttonicon-color-background: var(--slds-c-buttoniconstateful-color-background);
    --slds-c-buttonicon-color-background-hover: var(--slds-c-buttoniconstateful-color-background-hover);
    --slds-c-buttonicon-color-background-focus: var(--slds-c-buttoniconstateful-color-background-focus);
    --slds-c-buttonicon-color-background-active: var(--slds-c-buttoniconstateful-color-background-active);

    --slds-c-buttonicon-color-border: var(--slds-c-buttoniconstateful-color-border);
    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttoniconstateful-color-border-hover);
    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttoniconstateful-color-border-focus);
    --slds-c-buttonicon-color-border-active: var(--slds-c-buttoniconstateful-color-border-active);

    /* Disabled
    To Do: bkg and border should work once button's host selector is fixed */
    --slds-c-buttonicon-color-background-disabled: var(--slds-c-buttoniconstateful-color-background-disabled);
    --slds-c-buttonicon-color-border-disabled: var(--slds-c-buttoniconstateful-color-border-disabled);
    --slds-c-buttonicon-color-foreground-disabled: var(
      --slds-c-buttoniconstateful-color-foreground-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );

    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttoniconstateful-spacing-inline);
    --slds-c-buttonicon-spacing-block: var(--slds-c-buttoniconstateful-spacing-block);
  }

  /* :host([variant='border-filled'])::part(button-icon-stateful), */
  :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon-stateful'] {
    --slds-c-buttonicon-borderfilled-color-background: var(
      --slds-c-buttoniconstateful-borderfilled-color-background
    );
    --slds-c-buttonicon-borderfilled-color-background-hover: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-hover
    );
    --slds-c-buttonicon-borderfilled-color-background-focus: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-focus
    );
    --slds-c-buttonicon-borderfilled-color-background-active: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-active
    );

    --slds-c-buttonicon-borderfilled-color-border: var(--slds-c-buttoniconstateful-borderfilled-color-border);
    --slds-c-buttonicon-borderfilled-color-border-hover: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-hover
    );
    --slds-c-buttonicon-borderfilled-color-border-focus: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-focus
    );
    --slds-c-buttonicon-borderfilled-color-border-active: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-active
    );
  }

  /* :host([variant='border-inverse'])::part(button-icon-stateful), */
  :host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon-stateful'] {
    --slds-c-buttonicon-borderinverse-color-border: var(
      --slds-c-buttoniconstateful-borderinverse-color-border
    );
    --slds-c-buttonicon-borderinverse-color-border-hover: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-hover
    );
    --slds-c-buttonicon-borderinverse-color-border-focus: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-focus
    );
    --slds-c-buttonicon-borderinverse-color-border-active: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-active
    );

    --slds-c-buttonicon-borderinverse-color-foreground: var(
      --slds-c-buttoniconstateful-borderinverse-color-foreground
    );
    --slds-c-buttonicon-borderinverse-color-foreground-hover: var(
      --slds-c-buttoniconstateful-borderinverse-color-foreground-hover
    );
    --slds-c-buttonicon-borderinverse-color-foreground-focus: var(
      --slds-c-buttoniconstateful-borderinverse-color-foreground-focus
    );
    --slds-c-buttonicon-borderinverse-color-foreground-active: var(
      --slds-c-buttoniconstateful-borderinverse-color-foreground-active
    );
  }

  /* Selected + Variants */
  :host([data-render-mode="shadow"][selected]) [part~='button-icon-stateful'] {
    --slds-c-buttoniconstateful-color-foreground: var(
      --slds-c-buttoniconstateful-color-foreground-selected,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttoniconstateful-color-foreground-hover: var(
      --slds-c-buttoniconstateful-color-foreground-selected-hover,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttoniconstateful-color-foreground-focus: var(
      --slds-c-buttoniconstateful-color-foreground-selected-focus,
      var(--slds-c-buttoniconstateful-color-foreground-hover)
    );
    --slds-c-buttoniconstateful-color-foreground-active: var(
      --slds-c-buttoniconstateful-color-foreground-selected-active,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );

    --slds-c-buttoniconstateful-color-background: var(
      --slds-c-buttoniconstateful-color-background-selected,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-buttoniconstateful-color-background-hover: var(
      --slds-c-buttoniconstateful-color-background-selected-hover,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-buttoniconstateful-color-background-focus: var(
      --slds-c-buttoniconstateful-color-background-selected-focus,
      var(--slds-c-buttoniconstateful-color-background-hover)
    );
    --slds-c-buttoniconstateful-color-background-active: var(
      --slds-c-buttoniconstateful-color-background-selected-active,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );

    --slds-c-buttoniconstateful-color-border: var(
      --slds-c-buttoniconstateful-color-border-selected,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-buttoniconstateful-color-border-hover: var(
      --slds-c-buttoniconstateful-color-border-selected-hover,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-buttoniconstateful-color-border-focus: var(
      --slds-c-buttoniconstateful-color-border-selected-focus,
      var(--slds-c-buttoniconstateful-color-border-hover)
    );
    --slds-c-buttoniconstateful-color-border-active: var(
      --slds-c-buttoniconstateful-color-border-selected-active,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
  }

  :host([data-render-mode="shadow"][selected][variant='border-filled']) [part~='button-icon-stateful'] {
    --slds-c-buttoniconstateful-borderfilled-color-background: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-selected,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-buttoniconstateful-borderfilled-color-background-hover: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-selected-hover,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-buttoniconstateful-borderfilled-color-background-focus: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-selected-focus,
      var(--slds-c-buttoniconstateful-borderfilled-color-background-hover)
    );
    --slds-c-buttoniconstateful-borderfilled-color-background-active: var(
      --slds-c-buttoniconstateful-borderfilled-color-background-selected-active,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );

    --slds-c-buttoniconstateful-borderfilled-color-border: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-selected,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-buttoniconstateful-borderfilled-color-border-hover: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-selected-hover,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-buttoniconstateful-borderfilled-color-border-focus: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-selected-focus,
      var(--slds-c-buttoniconstateful-borderfilled-color-border-hover)
    );
    --slds-c-buttoniconstateful-borderfilled-color-border-active: var(
      --slds-c-buttoniconstateful-borderfilled-color-border-selected-active,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );

    /* 
      Note: 
      Border-filled variant does not inherit foreground colors from button-icon (as it doesn't exist).
      It needs to inherit from default selected hooks.
    */
    --slds-c-buttoniconstateful-color-foreground-selected: var(
      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected
    );
    --slds-c-buttoniconstateful-color-foreground-selected-hover: var(
      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-hover
    );
    --slds-c-buttoniconstateful-color-foreground-selected-focus: var(
      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-focus,
      var(--slds-c-buttoniconstateful-color-foreground-selected-hover)
    );
    --slds-c-buttoniconstateful-color-foreground-selected-active: var(
      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-active
    );
  }

  :host([data-render-mode="shadow"][selected][variant='border-inverse']) [part~='button-icon-stateful'] {
    --slds-c-buttoniconstateful-borderinverse-color-border: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-selected,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-buttoniconstateful-borderinverse-color-border-hover: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-selected-hover,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-buttoniconstateful-borderinverse-color-border-focus: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-selected-focus,
      var(--slds-c-buttoniconstateful-borderinverse-color-border-hover)
    );
    --slds-c-buttoniconstateful-borderinverse-color-border-active: var(
      --slds-c-buttoniconstateful-borderinverse-color-border-selected-active,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );

    /* 
      Note: 
      Border-inverse variant does not inherit background colors from button-icon (as it doesn't exist).
      It needs to inherit from default selected hooks.
    */
    --slds-c-buttoniconstateful-color-background-selected: var(
      --slds-c-buttoniconstateful-borderinverse-color-background-selected
    );
    --slds-c-buttoniconstateful-color-background-selected-hover: var(
      --slds-c-buttoniconstateful-borderinverse-color-background-selected-hover
    );
    --slds-c-buttoniconstateful-color-background-selected-focus: var(
      --slds-c-buttoniconstateful-borderinverse-color-background-selected-focus,
      var(--slds-c-buttoniconstateful-color-background-selected-hover)
    );
    --slds-c-buttoniconstateful-color-background-selected-active: var(
      --slds-c-buttoniconstateful-borderinverse-color-background-selected-active,
      var(--slds-c-buttoniconstateful-color-background-selected-focus)
    );
  }
}