/* 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: var(--sds-c-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-radius: var(--sds-c-button-radius-border, var(--sds-c-button-radius-border, 0.25rem));
  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
  width: var(--sds-c-button-width);
  line-height: var(--sds-c-button-line-height);
  white-space: normal;
  user-select: none;
  align-items: center;
  text-decoration: var(--sds-c-button-text-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)
    );
    --sds-c-button-radius-border: var(--slds-c-button-neutral-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 */

:host([data-render-mode="shadow"]) .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;
}

@supports (--styling-hooks: '') {
  :host([data-render-mode="shadow"]) .slds-popover {
    position: relative;
    border-radius: var(--sds-g-radius-border-2, 0.25rem);
    width: 14rem;
    min-height: 2rem;
    z-index: 6000;
    background-color: var(--sds-g-color-neutral-base-100, #ffffff);
    display: inline-block;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
  }

  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
    margin-bottom: 0;
  }

  :host([data-render-mode="shadow"]) .slds-popover__body {
    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
  }

  :host([data-render-mode="shadow"]) .slds-popover__body,
  .slds-popover__footer {
    position: relative;
    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
    word-wrap: break-word;
  }

  :host([data-render-mode="shadow"]) .slds-popover__footer {
    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
  }

  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sds-g-spacing-1, 0.25rem);
  }

  :host([data-render-mode="shadow"]) .slds-is-absolute {
    position: absolute;
  }

  :host([data-render-mode="shadow"]) .slds-show {
    display: block;
  }
}