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

:host([data-render-mode="shadow"]:focus) {
  outline: 0;
}

:host([data-render-mode="shadow"]) [part~='button'] {
  display: inline-flex;
  position: relative;
  background: none;
  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
  background-clip: border-box;
  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
  padding-left: var(
    --sds-c-button-spacing-inline-start,
    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
  );
  padding-right: var(
    --sds-c-button-spacing-inline-end,
    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
  );
  padding-top: var(
    --sds-c-button-spacing-block-start,
    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
  );
  padding-bottom: var(
    --sds-c-button-spacing-block-start,
    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
  );
  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
  border-style: solid;
  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
  border-start-start-radius: var(
    --sds-c-button-radius-border-startstart,
    var(
      --sds-c-button-radius-border,
      var(
        --sds-s-button-radius-border-startstart,
        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
      )
    )
  );
  border-start-end-radius: var(
    --sds-c-button-radius-border-startend,
    var(
      --sds-c-button-radius-border,
      var(
        --sds-s-button-radius-border-startend,
        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
      )
    )
  );
  border-end-start-radius: var(
    --sds-c-button-radius-border-endstart,
    var(
      --sds-c-button-radius-border,
      var(
        --sds-s-button-radius-border-endstart,
        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
      )
    )
  );
  border-end-end-radius: var(
    --sds-c-button-radius-border-endend,
    var(
      --sds-c-button-radius-border,
      var(
        --sds-s-button-radius-border-endend,
        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
      )
    )
  );
  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
  width: var(--sds-c-button-sizing-width);

  /* this line height hook is incorrect but is used in core - need to get teams to change */
  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
  line-height: var(--sds-c-button-line-height);
  white-space: normal;
  user-select: none;
  align-items: center;
  text-decoration: var(--sds-c-button-font-decoration, none);
  appearance: none;
}

:host([data-render-mode="shadow"]) [part~='button']:hover {
  --sds-c-button-text-color: var(
    --sds-c-button-text-color-hover,
    var(--sds-s-button-text-color-hover, #0176d3)
  );
  --sds-c-button-color-background: var(
    --sds-c-button-color-background-hover,
    var(--sds-s-button-color-background-hover)
  );
  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));

  cursor: pointer;
}

:host([data-render-mode="shadow"]) [part~='button']:focus {
  --sds-c-button-color-background: var(
    --sds-c-button-color-background-focus,
    var(--sds-s-button-color-background-focus)
  );
  --sds-c-button-color-border: var(
    --sds-c-button-color-border-focus,
    var(--sds-s-button-color-border-focus, #0176d3)
  );
  --sds-c-button-text-color: var(
    --sds-c-button-text-color-focus,
    var(--sds-s-button-text-color-focus, #0176d3)
  );
  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));

  outline: 0;
}

:host([data-render-mode="shadow"]) [part~='button']:active {
  --sds-c-button-text-color: var(
    --sds-c-button-text-color-active,
    var(--sds-s-button-text-color-active, currentColor)
  );
  --sds-c-button-color-background: var(
    --sds-c-button-color-background-active,
    var(--sds-s-button-color-background-active)
  );
  --sds-c-button-color-border: var(
    --sds-c-button-color-border-active,
    var(--sds-s-button-color-border-active, #0176d3)
  );
}

:host([data-render-mode="shadow"]) [part~='button']:disabled {
  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);

  pointer-events: none;
}

:host([data-render-mode="shadow"]) [part~='button']:disabled * {
  pointer-events: none;
}

/* 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: '') {
  /**
     * LBC default is the 'neutral' variant.
     *
     * We retain the 'neutral' variant in the hook names for interoperability
     * with SLDS light DOM blueprints which do explicitly define a 'neutral'
     * variant which is not the default.
     *
     * See 'base' variant below.
     *
     */

  :host([data-render-mode="shadow"]) [part~='button'] {
    /* slds-icon mapping */
    --slds-c-icon-sizing-border: 0;
    --slds-c-icon-sizing: 0.875rem;
    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);

    --sds-c-button-line-height: var(
      --slds-c-button-neutral-font-lineheight,
      var(--slds-s-button-font-lineheight, 1.875rem)
    );

    /* Border radius - shared */
    --sds-c-button-radius-border-startstart: var(
      --slds-c-button-neutral-radius-border-startstart,
      var(
        --slds-c-button-neutral-radius-border,
        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
      )
    );
    --sds-c-button-radius-border-endstart: var(
      --slds-c-button-radius-border-endstart,
      var(
        --slds-c-button-neutral-radius-border,
        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
      )
    );
    --sds-c-button-radius-border-startend: var(
      --slds-c-button-radius-border-startend,
      var(
        --slds-c-button-neutral-radius-border,
        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
      )
    );
    --sds-c-button-radius-border-endend: var(
      --slds-c-button-radius-border-endend,
      var(
        --slds-c-button-neutral-radius-border,
        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
      )
    );

    --sds-c-button-spacing-inline: var(
      --slds-c-button-neutral-spacing-inline,
      var(--slds-s-button-spacing-inline, 1rem)
    );
    --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);

    /**
     * A note about fallbacks on the default variant:
     *
     * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
     * hooks are tied to a selector with higher specificity. In the default variant,
     * attempting to use the previous state's hook as a fallback will fail because
     * it picks up on sds-button's state hooks instead and creates an infinite loop
     * which ultimately breaks styling.
     *
     * This is another use-case for removing the opinion of state selectors in SDS.
     *
     * So in the default variant below, you'll see many repeated fallback values.
     *
     * In all other variants, it is ok to use the previous state as a fallback value.
     */

    /* Background color */
    --sds-c-button-color-background: var(
      --slds-c-button-neutral-color-background,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --sds-c-button-color-background-hover: var(
      --slds-c-button-neutral-color-background-hover,
      var(--sds-g-color-neutral-base-95, #f3f3f3)
    );
    --sds-c-button-color-background-focus: var(
      --slds-c-button-neutral-color-background-focus,
      var(--sds-g-color-neutral-base-95, #f3f3f3)
    );
    --sds-c-button-color-background-active: var(
      --slds-c-button-neutral-color-background-active,
      var(--sds-g-color-neutral-base-90, #e5e5e5)
    );

    /* Border color */
    --sds-c-button-color-border: var(
      --slds-c-button-neutral-color-border,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --sds-c-button-color-border-hover: var(
      --slds-c-button-neutral-color-border-hover,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --sds-c-button-color-border-focus: var(
      --slds-c-button-neutral-color-border-focus,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --sds-c-button-color-border-active: var(
      --slds-c-button-neutral-color-border-active,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );

    /* Text color */
    --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--sds-g-color-brand-base-40, #0b5cab));
    --sds-c-button-text-color-hover: var(
      --slds-c-button-neutral-text-color-hover,
      var(--sds-g-color-brand-base-30, #014486)
    );
    --sds-c-button-text-color-focus: var(
      --slds-c-button-neutral-text-color-focus,
      var(--sds-g-color-brand-base-30, #014486)
    );
    --sds-c-button-text-color-active: var(
      --slds-c-button-neutral-text-color-active,
      var(--sds-g-color-brand-base-30, #014486)
    );

    /* Shadow */
    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);

    /* Disabled */
    --sds-c-button-color-background-disabled: var(
      --slds-c-button-neutral-color-background-disabled,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --sds-c-button-color-border-disabled: var(
      --slds-c-button-neutral-color-border-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --sds-c-button-text-color-disabled: var(
      --slds-c-button-neutral-text-color-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
  }

  /**
   * Variant - Brand
   */
  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(
      --slds-c-button-brand-color-background,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-brand-color-background-hover,
      var(--sds-g-color-brand-base-30, #014486)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-brand-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-brand-color-background-active,
      var(--sds-g-color-brand-base-20, #032d60)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-brand-color-border,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-brand-color-border-hover,
      var(--sds-g-color-brand-base-30, #014486)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-brand-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-brand-color-border-active,
      var(--sds-g-color-brand-base-20, #032d60)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-brand-text-color,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-brand-text-color-hover,
      var(--slds-c-button-neutral-text-color)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-brand-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-brand-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-brand-color-background-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-brand-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(
      --slds-c-button-brand-text-color-disabled,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
  }

  /**
   * Variant - Brand Outline
   */
  :host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(
      --slds-c-button-brandoutline-color-background,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-brandoutline-color-background-hover,
      var(--sds-g-color-neutral-base-95, #f3f3f3)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-brandoutline-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-brandoutline-color-background-active,
      var(--sds-g-color-neutral-base-90, #e5e5e5)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-brandoutline-color-border,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-brandoutline-color-border-hover,
      var(--slds-c-button-neutral-color-border)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-brandoutline-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-brandoutline-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-brandoutline-text-color,
      var(--sds-g-color-brand-base-40, #0b5cab)
    );
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-brandoutline-text-color-hover,
      var(--sds-g-color-brand-base-30, #014486)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-brandoutline-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-brandoutline-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-brandoutline-color-background-disabled
    );
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-brandoutline-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-brandoutline-text-color-disabled);
  }

  /**
   * Variant - Inverse
   */
  :host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(--slds-c-button-inverse-color-background, transparent);
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-inverse-color-background-hover,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-inverse-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-inverse-color-background-active,
      var(--sds-g-color-neutral-base-95, #f3f3f3)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-inverse-color-border,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-inverse-color-border-hover,
      var(--slds-c-button-neutral-color-border)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-inverse-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-inverse-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-inverse-text-color,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-inverse-text-color-hover,
      var(--sds-g-color-brand-base-50, #0176d3)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-inverse-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-inverse-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-inverse-color-background-disabled,
      transparent
    );
    --slds-c-button-neutral-color-border-disabled: var(
      --slds-c-button-inverse-color-border-disabled,
      var(--sds-g-color-neutral-base-60, #939393)
    );
    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-inverse-text-color-disabled);
  }

  /**
   * Variant - Destructive
   */
  :host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(
      --slds-c-button-destructive-color-background,
      var(--sds-g-color-error-base-40, #ba0517)
    );
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-destructive-color-background-hover,
      var(--sds-g-color-error-base-30, #8e030f)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-destructive-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-destructive-color-background-active,
      var(--sds-g-color-error-base-20, #640103)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-destructive-color-border,
      var(--sds-g-color-error-base-40, #ba0517)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-destructive-color-border-hover,
      var(--sds-g-color-error-base-30, #8e030f)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-destructive-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-destructive-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-destructive-text-color,
      var(--sds-g-color-error-base-100, #ffffff)
    );

    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-destructive-text-color-hover,
      var(--slds-c-button-neutral-text-color)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-destructive-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-destructive-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-destructive-color-background-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-destructive-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(
      --slds-c-button-destructive-text-color-disabled,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
  }

  /**
   * Variant - Success
   */
  :host([data-render-mode="shadow"][variant='success']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(
      --slds-c-button-success-color-background,
      var(--sds-g-color-success-base-50, #2e844a)
    );
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-success-color-background-hover,
      var(--sds-g-color-success-base-40, #22683e)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-success-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-success-color-background-active,
      var(--sds-g-color-success-base-30, #194e31)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-success-color-border,
      var(--sds-g-color-success-base-50, #2e844a)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-success-color-border-hover,
      var(--sds-g-color-success-base-40, #22683e)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-success-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-success-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-success-text-color,
      var(--sds-g-color-success-base-100, #ffffff)
    );
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-success-text-color-hover,
      var(--slds-c-button-neutral-text-color)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-success-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-success-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-success-color-background-disabled,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-success-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(
      --slds-c-button-success-text-color-disabled,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
  }

  /**
   * Variant - Destructive Text
   */
  :host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
    --slds-c-button-neutral-color-background: var(
      --slds-c-button-destructivetext-color-background,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-destructivetext-color-background-hover,
      var(--sds-g-color-neutral-base-95, #f3f3f3)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-destructivetext-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-destructivetext-color-background-active,
      var(--sds-g-color-neutral-base-90, #e5e5e5)
    );
    --slds-c-button-neutral-color-border: var(
      --slds-c-button-destructivetext-color-border,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-destructivetext-color-border-hover,
      var(--slds-c-button-neutral-color-border)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-destructivetext-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-destructivetext-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-text-color: var(
      --slds-c-button-destructivetext-text-color,
      var(--sds-g-color-error-base-50, #ea001e)
    );
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-destructivetext-text-color-hover,
      var(--sds-g-color-error-base-40, #ba0517)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-destructivetext-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-destructivetext-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-destructivetext-color-background-disabled
    );
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-destructivetext-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-destructivetext-text-color-disabled);
  }

  /**
     * 'base' variant is not the default in LBC. It is the default in the light
     * DOM version of SLDS.
     *
     * So even though this is a non-default variant in this context, the hooks
     * for this variant are written as the default for interoperability with
     * SLDS light DOM.
     *
     * E.g. --slds-c-button-color-background
     */
  :host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
    --slds-c-button-neutral-spacing-inline: var(--slds-c-button-spacing-inline, 0);
    --slds-c-button-neutral-text-color: var(--slds-c-button-text-color, var(--sds-g-color-brand-base-40, #0b5cab));
    --slds-c-button-neutral-text-color-hover: var(
      --slds-c-button-text-color-hover,
      var(--slds-c-button-neutral-text-color)
    );
    --slds-c-button-neutral-text-color-focus: var(
      --slds-c-button-text-color-focus,
      var(--slds-c-button-neutral-text-color-hover)
    );
    --slds-c-button-neutral-text-color-active: var(
      --slds-c-button-text-color-active,
      var(--slds-c-button-neutral-text-color-focus)
    );
    --slds-c-button-neutral-color-border: var(--slds-c-button-color-border, transparent);
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-button-color-border-hover,
      var(--slds-c-button-neutral-color-border)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-button-color-border-focus,
      var(--slds-c-button-neutral-color-border-hover)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-button-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );
    --slds-c-button-neutral-color-background: var(--slds-c-button-color-background, transparent);
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-button-color-background-hover,
      var(--slds-c-button-neutral-color-background)
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-button-color-background-focus,
      var(--slds-c-button-neutral-color-background-hover)
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-button-color-background-active,
      var(--slds-c-button-neutral-color-background-focus)
    );

    /* Disabled */
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-color-border-disabled, transparent);
    --slds-c-button-neutral-color-background-disabled: var(
      --slds-c-button-color-background-disabled,
      transparent
    );
    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-text-color-disabled);
  }

  /**
   * Stretch
   */
  :host([data-render-mode="shadow"][stretch]) [part~='button'] {
    --sds-c-button-width: 100%;

    justify-content: center;
  }

  /**
   * Start/End Parts
   */
  :host([data-render-mode="shadow"]) [part~='start'] {
    display: inline-flex;
    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
  }

  :host([data-render-mode="shadow"]) [part~='end'] {
    display: inline-flex;
    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
  }
}

/**
 * Center button on all variants except 'base', and 'text'
 *
 * This addresses the issue of customers relying on preexisting x-axis centering
 * when they arbitrarily change the width of the button without the stretch variant.
 *
 * Ref
 * - https://github.com/salesforce-ux/design-system-internal/pull/4344
 * - https://github.com/salesforce-ux/design-system-internal/pull/4949
 */

:host([data-render-mode="shadow"][variant='brand']) [part~='button'],:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'],:host([data-render-mode="shadow"][variant='inverse']) [part~='button'],:host([data-render-mode="shadow"][variant='success']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
  justify-content: center;
}

/* 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([data-render-mode="shadow"]) [part~='button-icon'] {
    display: inline-flex;
  }

  /**
    * part - button-icon
    *
    * Default styling is "border" variant
    */
  :host([data-render-mode="shadow"]) [part~='button-icon'] {
    /* slds-icon mapping */
    --slds-c-icon-sizing-border: 0;
    --slds-c-icon-sizing: var(--slds-c-buttonicon-sizing, 0.875rem);
    --slds-c-icon-color-foreground: var(
      --slds-c-buttonicon-color-foreground,
      var(--sds-g-color-neutral-base-50, #747474)
    );

    /* Background */
    --slds-c-button-neutral-color-background: var(--slds-c-buttonicon-color-background, transparent);
    --slds-c-button-neutral-color-background-hover: var(
      --slds-c-buttonicon-color-background-hover,
      transparent
    );
    --slds-c-button-neutral-color-background-focus: var(
      --slds-c-buttonicon-color-background-focus,
      transparent
    );
    --slds-c-button-neutral-color-background-active: var(
      --slds-c-buttonicon-color-background-active,
      var(--slds-c-button-neutral-color-background-focus)
    );

    /* Spacing */
    --slds-c-button-neutral-spacing-inline: var(
      --slds-c-buttonicon-spacing-inline,
      var(--sds-s-button-spacing-inline, var(--sds-g-spacing-2, 0.5rem))
    );
    --slds-c-button-neutral-spacing-block: var(
      --slds-c-buttonicon-spacing-block,
      var(--sds-s-button-spacing-block, var(--sds-g-spacing-2, 0.5rem))
    );

    /* Border */
    --slds-c-button-neutral-color-border: var(
      --slds-c-buttonicon-color-border,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-hover: var(
      --slds-c-buttonicon-color-border-hover,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-focus: var(
      --slds-c-buttonicon-color-border-focus,
      var(--sds-g-color-neutral-base-80, #c9c9c9)
    );
    --slds-c-button-neutral-color-border-active: var(
      --slds-c-buttonicon-color-border-active,
      var(--slds-c-button-neutral-color-border-focus)
    );

    /* Shadow */
    --slds-c-button-neutral-shadow: var(--slds-c-buttonicon-shadow);
    --slds-c-button-neutral-shadow-focus: var(--slds-c-buttonicon-shadow-focus);

    /* Disabled */
    --slds-c-button-neutral-color-background-disabled: var(--slds-c-buttonicon-color-background-disabled);
    --slds-c-button-neutral-color-border-disabled: var(--slds-c-buttonicon-color-border-disabled);
    --slds-c-button-neutral-text-color-disabled: var(--slds-c-buttonicon-text-color-disabled);
  }

  /* slds-icon interaction states */
  :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
    --slds-c-icon-color-foreground: var(
      --slds-c-buttonicon-color-foreground-hover,
      var(--sds-g-color-brand-base-30, #014486)
    );
  }

  :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
    --slds-c-icon-color-foreground: var(
      --slds-c-buttonicon-color-foreground-focus,
      var(--sds-g-color-brand-base-30, #014486)
    );
  }

  :host([data-render-mode="shadow"]) [part~='button-icon']:active {
    --slds-c-icon-color-foreground: var(
      --slds-c-buttonicon-color-foreground-active,
      var(--sds-g-color-brand-base-30, #014486)
    );
  }

  /* Create disabled state for the 1st time since icon doesn't have disabled state. */
  :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
    --slds-c-icon-color-foreground: var(--slds-c-buttonicon-color-foreground-disabled);
  }

  /**
    * Variant - Bare
    *
    * Note: `_bare` variant is deprecated in SLDS and SLDS (light DOM version) assumes the `bare` variant
    * will be the default styling.
    *
    * We include it here as an explicit variant for two reasons:
    *
    * 1. LBC parity; LBC uses `border` variant as default, not `bare`.
    * 2. `bare` is the only variant that excludes padding; it is an outlier. All
    *    variants share common styling except `bare`. Separating out `bare` into
    *    its own variant saves us having to expose additional styling APIs on all
    *    the other variants just to reassign what `bare` is doing if it is default.
    */
  :host([data-render-mode="shadow"][variant='bare']) [part~='button-icon'] {
    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bare-color-border, transparent);
    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-bare-color-border-hover, transparent);
    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-bare-color-border-focus, transparent);
    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-bare-color-border-active, transparent);
    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bare-spacing-inline, 0);
    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bare-spacing-block, 0);

    /* Disabled */
    --slds-c-buttonicon-color-border-disabled: var(
      --slds-c-buttonicon-bare-color-border-disabled,
      transparent
    );
  }

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

    /* Disabled */
    --slds-c-buttonicon-color-border-disabled: var(
      --slds-c-buttonicon-container-color-border-disabled,
      transparent
    );
  }

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

    --slds-c-buttonicon-color-foreground: var(
      --slds-c-buttonicon-brand-color-foreground,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-foreground-hover: var(
      --slds-c-buttonicon-brand-color-foreground-hover,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-foreground-focus: var(
      --slds-c-buttonicon-brand-color-foreground-focus,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-foreground-active: var(
      --slds-c-buttonicon-brand-color-foreground-active,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
  }

  /**
    * Variant - Bare Inverse
    */
  :host([data-render-mode="shadow"][variant='bare-inverse']) [part~='button-icon'] {
    /* Background */
    --slds-c-buttonicon-color-background-active: transparent;

    /* Border */
    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bareinverse-color-border, transparent);
    --slds-c-buttonicon-color-border-hover: var(
      --slds-c-buttonicon-bareinverse-color-border-hover,
      transparent
    );
    --slds-c-buttonicon-color-border-focus: var(
      --slds-c-buttonicon-bareinverse-color-border-focus,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-color-border-focus);

    /* Spacing */
    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bareinverse-spacing-inline, 0);
    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bareinverse-spacing-block, 0);

    /* Shadow */
    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);

    /* Icon */
    --slds-c-buttonicon-color-foreground: var(
      --slds-c-buttonicon-bareinverse-color-foreground,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-foreground-hover: var(
      --slds-c-buttonicon-bareinverse-color-foreground-hover,
      var(--sds-g-color-brand-base-95, #eef4ff)
    );
    --slds-c-buttonicon-color-foreground-focus: var(
      --slds-c-buttonicon-bareinverse-color-foreground-focus,
      var(--sds-g-color-brand-base-95, #eef4ff)
    );
    --slds-c-buttonicon-color-foreground-active: var(
      --slds-c-buttonicon-bareinverse-color-foreground-active,
      var(--sds-g-color-brand-base-95, #eef4ff)
    );

    /* Disabled */
    --slds-c-buttonicon-color-border-disabled: var(
      --slds-c-buttonicon-bareinverse-color-border-disabled,
      transparent
    );
  }

  /**
    * Variant - Border Inverse
    */
  :host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon'] {
    /* Border */
    --slds-c-buttonicon-color-border: var(
      --slds-c-buttonicon-borderinverse-color-border,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-border-hover: var(
      --slds-c-buttonicon-borderinverse-color-border-hover,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-border-focus: var(
      --slds-c-buttonicon-borderinverse-color-border-focus,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-border-active: var(
      --slds-c-buttonicon-borderinverse-color-border-active,
      var(--sds-g-color-brand-base-100, #ffffff)
    );

    /* Shadow */
    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);

    /* Icon */
    --slds-c-buttonicon-color-foreground: var(
      --slds-c-buttonicon-borderinverse-color-foreground,
      var(--sds-g-color-brand-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-foreground-hover: var(
      --slds-c-buttonicon-borderinverse-color-foreground-hover,
      var(--sds-g-color-brand-base-95, #eef4ff)
    );
    --slds-c-buttonicon-color-foreground-focus: var(
      --slds-c-buttonicon-borderinverse-color-foreground-focus,
      var(--sds-g-color-brand-base-95, #eef4ff)
    );
    --slds-c-buttonicon-color-foreground-active: var(
      --slds-c-buttonicon-borderinverse-color-foreground-active,
      var(--sds-g-color-brand-base-90, #d8e6fe)
    );
  }

  /**
    * Variant - Border Filled
    */
  :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
    --slds-c-buttonicon-color-background: var(
      --slds-c-buttonicon-borderfilled-color-background,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-background-hover: var(
      --slds-c-buttonicon-borderfilled-color-background-hover,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-background-focus: var(
      --slds-c-buttonicon-borderfilled-color-background-focus,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-background-active: var(
      --slds-c-buttonicon-borderfilled-color-background-active,
      var(--sds-g-color-neutral-base-100, #ffffff)
    );
    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-borderfilled-color-border);
    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-borderfilled-color-border-hover);
    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-borderfilled-color-border-focus);
    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-borderfilled-color-border-active);
  }

  /**
    * Sizes
    *
    * Sizes are restricted to specific variants.
    */
  :host([data-render-mode="shadow"][size='xx-small']) [part~='button-icon'] {
    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-sizing: 0.5rem;
  }

  :host([data-render-mode="shadow"][size='x-small']) [part~='button-icon'] {
    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-sizing: 0.75rem;
  }

  :host([data-render-mode="shadow"][size='small']) [part~='button-icon'] {
    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
    --slds-c-buttonicon-sizing: 0.875rem;
  }

  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) [part~='button-icon'] {
    --slds-c-buttonicon-spacing-block: 0;
    --slds-c-buttonicon-spacing-inline: 0;
    --slds-c-buttonicon-sizing: 0.5rem;
  }

  :host([data-render-mode="shadow"][size='small'][variant='bare']) [part~='button-icon'] {
    --slds-c-buttonicon-spacing-block: 0;
    --slds-c-buttonicon-spacing-inline: 0;
    --slds-c-buttonicon-sizing: 0.75rem;
  }

  :host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'] {
    --slds-c-buttonicon-sizing: 1.5rem;
  }

  /**
    * End part
    */
  :host([data-render-mode="shadow"]) [part~='end'] {
    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
  }

  /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
    * This is a hybrid patch between synthetic and native shadow. The ideal final
    * outcome is the removal of this class and replacing the class with the SLDS
    * utility package solution.
    */
  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
}

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