/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--button--color--background--primary--default: var(--digi--color--background--interactive--default--primary);
  --digi--button--color--background--primary--hover: var(--digi--color--background--interactive--hover--primary);
  --digi--button--color--background--primary--focus: var(--digi--color--background--interactive--hover--primary);
  --digi--button--color--background--primary--active: var(--digi--color--background--interactive--hover--primary);
  --digi--button--color--background--secondary--default: var(--digi--color--background--interactive--default--secondary);
  --digi--button--color--background--secondary--hover: var(--digi--color--background--interactive--hover--secondary);
  --digi--button--color--background--secondary--focus: var(--digi--color--background--interactive--hover--secondary);
  --digi--button--color--background--secondary--active: var(--digi--color--background--interactive--hover--secondary);
  --digi--button--color--background--function--default: transparent;
  --digi--button--color--background--function--hover: transparent;
  --digi--button--color--background--function--focus: transparent;
  --digi--button--color--background--function--active: transparent;
  --digi--button--color--text--primary--default: var(--digi--color--text--interactive--secondary);
  --digi--button--color--text--primary--hover: var(--digi--color--text--interactive--secondary);
  --digi--button--color--text--primary--focus: var(--digi--color--text--interactive--secondary);
  --digi--button--color--text--primary--active: var(--digi--color--text--interactive--secondary);
  --digi--button--color--text--secondary--default: var(--digi--color--text--interactive--brand-primary);
  --digi--button--color--text--secondary--hover: var(--digi--color--text--interactive--brand-primary);
  --digi--button--color--text--secondary--focus: var(--digi--color--text--interactive--brand-primary);
  --digi--button--color--text--secondary--active: var(--digi--color--text--interactive--brand-primary);
  --digi--button--color--text--function--default: var(--digi--color--text--interactive--primary);
  --digi--button--color--text--function--hover: var(--digi--color--text--interactive--primary);
  --digi--button--color--text--function--focus: var(--digi--color--text--interactive--primary);
  --digi--button--color--text--function--active: var(--digi--color--text--interactive--primary);
  --digi--button--color--border--primary--default: var(--digi--color--background--interactive--default--primary);
  --digi--button--color--border--primary--hover: var(--digi--color--background--interactive--hover--primary);
  --digi--button--color--border--primary--focus: var(--digi--color--background--interactive--default--primary);
  --digi--button--color--border--primary--active: var(--digi--color--background--interactive--default--primary);
  --digi--button--color--border--secondary--default: var(--digi--color--border--interactive--default--primary);
  --digi--button--color--border--secondary--hover: var(--digi--color--border--interactive--hover--secondary);
  --digi--button--color--border--secondary--focus: var(--digi--color--border--interactive--default--primary);
  --digi--button--color--border--secondary--active: var(--digi--color--border--interactive--default--primary);
  --digi--button--color--border--function--default: initial;
  --digi--button--color--border--function--hover: initial;
  --digi--button--color--border--function--focus: initial;
  --digi--button--color--border--function--active: initial;
  --digi--button--color--icon--primary--default: var(--digi--color--icon--secondary);
  --digi--button--color--icon--primary--hover: var(--digi--color--icon--secondary);
  --digi--button--color--icon--primary--focus: var(--digi--color--icon--secondary);
  --digi--button--color--icon--primary--active: var(--digi--color--icon--secondary);
  --digi--button--color--icon--secondary--default: var(--digi--color--icon--brand-primary);
  --digi--button--color--icon--secondary--hover: var(--digi--color--icon--brand-primary);
  --digi--button--color--icon--secondary--focus: var(--digi--color--icon--brand-primary);
  --digi--button--color--icon--secondary--active: var(--digi--color--icon--brand-primary);
  --digi--button--color--icon--function--default: var(--digi--color--icon--cta);
  --digi--button--color--icon--function--hover: var(--digi--color--icon--cta);
  --digi--button--color--icon--function--focus: var(--digi--color--icon--cta);
  --digi--button--color--icon--function--active: var(--digi--color--icon--cta);
  --digi--button--border-width--primary--default: var(--digi--border-width--primary);
  --digi--button--border-width--primary--hover: var(--digi--border-width--primary);
  --digi--button--border-width--secondary--default: var(--digi--border-width--primary);
  --digi--button--border-width--secondary--hover: var(--digi--border-width--primary);
  --digi--button--border-width--function--default: initial;
  --digi--button--border-width--function--hover: initial;
  --digi--button--border-style--primary--default: var(--digi--border-style--primary);
  --digi--button--border-style--primary--hover: var(--digi--border-style--primary);
  --digi--button--border-style--primary--focus: var(--digi--border-style--primary);
  --digi--button--border-style--primary--active: var(--digi--border-style--primary);
  --digi--button--border-style--secondary--default: var(--digi--border-style--primary);
  --digi--button--border-style--secondary--hover: var(--digi--border-style--primary);
  --digi--button--border-style--secondary--focus: var(--digi--border-style--primary);
  --digi--button--border-style--secondary--active: var(--digi--border-style--primary);
  --digi--button--border-style--function--default: var(--digi--border-style--secondary);
  --digi--button--border-style--function--hover: var(--digi--border-style--secondary);
  --digi--button--border-style--function--focus: var(--digi--border-style--secondary);
  --digi--button--border-style--function--active: var(--digi--border-style--secondary);
  --digi--button--border-radius--primary--default: var(--digi--border-radius--secondary);
  --digi--button--border-radius--primary--hover: var(--digi--border-radius--secondary);
  --digi--button--border-radius--primary--focus: var(--digi--border-radius--secondary);
  --digi--button--border-radius--primary--active: var(--digi--border-radius--secondary);
  --digi--button--border-radius--secondary--default: var(--digi--border-radius--secondary);
  --digi--button--border-radius--secondary--hover: var(--digi--border-radius--secondary);
  --digi--button--border-radius--secondary--focus: var(--digi--border-radius--secondary);
  --digi--button--border-radius--secondary--active: var(--digi--border-radius--secondary);
  --digi--button--border-radius--function--default: initial;
  --digi--button--border-radius--function--hover: initial;
  --digi--button--border-radius--function--focus: initial;
  --digi--button--border-radius--function--active: initial;
  --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
  --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);
  --digi--button--font-size--small: var(--digi--global--typography--font-size--interaction-small);
  --digi--button--font-size--medium: var(--digi--global--typography--font-size--interaction-medium);
  --digi--button--font-family: var(--digi--global--typography--font-family--default);
  --digi--button--font-weight--default: var(--digi--typography--button--font-weight--desktop);
  --digi--button--font-weight--function: var(--digi--typography--label--font-weight--desktop);
  --digi--button--width: initial;
  --digi--button--display: initial;
  --digi--button--justify-content--default: initial;
  --digi--button--justify-content--full-width: center;
  --digi--button--align-items: center;
  --digi--button--text-align--default: initial;
  --digi--button--text-align--full-width: center;
  --digi--button--outline--default: initial;
  --digi--button--outline--focus: initial;
  --digi--button--cursor: pointer;
  --digi--button--icon--spacing: var(--digi--gutter--large);
  --digi--button--min-height--small: unset;
}
:host .digi-button {
  /* Variations and sizes */
  /* Attributes */
  font-family: var(--digi--button--font-family);
  background: var(--COLOR--BACKGROUND--DEFAULT);
  color: var(--COLOR--TEXT--DEFAULT);
  padding: var(--PADDING);
  border-radius: var(--BORDER-RADIUS--DEFAULT);
  border-width: var(--BORDER-WIDTH--DEFAULT);
  border-style: var(--BORDER-STYLE--DEFAULT);
  border-color: var(--COLOR--BORDER--DEFAULT);
  font-weight: var(--FONT-WEIGHT);
  font-size: var(--FONT-SIZE);
  outline: var(--digi--button--outline--default);
  text-align: var(--digi--button--text-align--default);
  width: var(--digi--button--width);
  display: var(--digi--button--display);
  justify-content: var(--digi--button--justify-content--default);
  cursor: var(--digi--button--cursor);
  min-height: var(--MIN-HEIGHT);
  align-items: var(--digi--button--align-items);
  white-space: nowrap;
}
:host .digi-button--variation-primary {
  --COLOR--BACKGROUND--DEFAULT: var(--digi--button--color--background--primary--default);
  --COLOR--BACKGROUND--HOVER: var(--digi--button--color--background--primary--hover);
  --COLOR--BACKGROUND--FOCUS: var(--digi--button--color--background--primary--focus);
  --COLOR--BACKGROUND--ACTIVE: var(--digi--button--color--background--primary--active);
  --COLOR--TEXT--DEFAULT: var(--digi--button--color--text--primary--default);
  --COLOR--TEXT--HOVER: var(--digi--button--color--text--primary--hover);
  --COLOR--TEXT--FOCUS: var(--digi--button--color--text--primary--focus);
  --COLOR--TEXT--ACTIVE: var(--digi--button--color--text--primary--active);
  --COLOR--ICON--DEFAULT: var(--digi--button--color--icon--primary--default);
  --COLOR--ICON--HOVER: var(--digi--button--color--icon--primary--hover);
  --COLOR--ICON--FOCUS: var(--digi--button--color--icon--primary--focus);
  --COLOR--ICON--ACTIVE: var(--digi--button--color--icon--primary--active);
  --COLOR--BORDER--DEFAULT: var(--digi--button--color--border--primary--default);
  --COLOR--BORDER--HOVER: var(--digi--button--color--border--primary--hover);
  --COLOR--BORDER--FOCUS: var(--digi--button--color--border--primary--focus);
  --COLOR--BORDER--ACTIVE: var(--digi--button--color--border--primary--active);
  --BORDER-RADIUS--DEFAULT: var(--digi--button--border-radius--primary--default);
  --BORDER-RADIUS--HOVER: var(--digi--button--border-radius--primary--hover);
  --BORDER-RADIUS--FOCUS: var(--digi--button--border-radius--primary--focus);
  --BORDER-RADIUS--ACTIVE: var(--digi--button--border-radius--primary--active);
  --BORDER-WIDTH--DEFAULT: var(--digi--button--border-width--primary--default);
  --BORDER-WIDTH--HOVER: var(--digi--button--border-width--primary--hover);
  --BORDER-WIDTH--FOCUS: var(--digi--button--border-width--primary--focus);
  --BORDER-WIDTH--ACTIVE: var(--digi--button--border-width--primary--active);
  --BORDER-STYLE--DEFAULT: var(--digi--button--border-style--primary--default);
  --BORDER-STYLE--HOVER: var(--digi--button--border-style--primary--hover);
  --BORDER-STYLE--FOCUS: var(--digi--button--border-style--primary--focus);
  --BORDER-STYLE--ACTIVE: var(--digi--button--border-style--primary--active);
  --FONT-WEIGHT: var(--digi--button--font-weight--default);
}
:host .digi-button--variation-secondary {
  --COLOR--BACKGROUND--DEFAULT: var(--digi--button--color--background--secondary--default);
  --COLOR--BACKGROUND--HOVER: var(--digi--button--color--background--secondary--hover);
  --COLOR--BACKGROUND--FOCUS: var(--digi--button--color--background--secondary--focus);
  --COLOR--BACKGROUND--ACTIVE: var(--digi--button--color--background--secondary--active);
  --COLOR--TEXT--DEFAULT: var(--digi--button--color--text--secondary--default);
  --COLOR--TEXT--HOVER: var(--digi--button--color--text--secondary--hover);
  --COLOR--TEXT--FOCUS: var(--digi--button--color--text--secondary--focus);
  --COLOR--TEXT--ACTIVE: var(--digi--button--color--text--secondary--active);
  --COLOR--ICON--DEFAULT: var(--digi--button--color--icon--secondary--default);
  --COLOR--ICON--HOVER: var(--digi--button--color--icon--secondary--hover);
  --COLOR--ICON--FOCUS: var(--digi--button--color--icon--secondary--focus);
  --COLOR--ICON--ACTIVE: var(--digi--button--color--icon--secondary--active);
  --COLOR--BORDER--DEFAULT: var(--digi--button--color--border--secondary--default);
  --COLOR--BORDER--HOVER: var(--digi--button--color--border--secondary--hover);
  --COLOR--BORDER--FOCUS: var(--digi--button--color--border--secondary--focus);
  --COLOR--BORDER--ACTIVE: var(--digi--button--color--border--secondary--active);
  --BORDER-RADIUS--DEFAULT: var(--digi--button--border-radius--secondary--default);
  --BORDER-RADIUS--HOVER: var(--digi--button--border-radius--secondary--hover);
  --BORDER-RADIUS--FOCUS: var(--digi--button--border-radius--secondary--focus);
  --BORDER-RADIUS--ACTIVE: var(--digi--button--border-radius--secondary--active);
  --BORDER-WIDTH--DEFAULT: var(--digi--button--border-width--secondary--default);
  --BORDER-WIDTH--HOVER: var(--digi--button--border-width--secondary--hover);
  --BORDER-WIDTH--FOCUS: var(--digi--button--border-width--secondary--focus);
  --BORDER-WIDTH--ACTIVE: var(--digi--button--border-width--secondary--active);
  --BORDER-STYLE--DEFAULT: var(--digi--button--border-style--secondary--default);
  --BORDER-STYLE--HOVER: var(--digi--button--border-style--secondary--hover);
  --BORDER-STYLE--FOCUS: var(--digi--button--border-style--secondary--focus);
  --BORDER-STYLE--ACTIVE: var(--digi--button--border-style--secondary--active);
  --FONT-WEIGHT: var(--digi--button--font-weight--default);
}
:host .digi-button--variation-function {
  --COLOR--BACKGROUND--DEFAULT: var(--digi--button--color--background--function--default);
  --COLOR--BACKGROUND--HOVER: var(--digi--button--color--background--function--hover);
  --COLOR--BACKGROUND--FOCUS: var(--digi--button--color--background--function--focus);
  --COLOR--BACKGROUND--ACTIVE: var(--digi--button--color--background--function--active);
  --COLOR--TEXT--DEFAULT: var(--digi--button--color--text--function--default);
  --COLOR--TEXT--HOVER: var(--digi--button--color--text--function--hover);
  --COLOR--TEXT--FOCUS: var(--digi--button--color--text--function--focus);
  --COLOR--TEXT--ACTIVE: var(--digi--button--color--text--function--active);
  --COLOR--ICON--DEFAULT: var(--digi--button--color--icon--function--default);
  --COLOR--ICON--HOVER: var(--digi--button--color--icon--function--hover);
  --COLOR--ICON--FOCUS: var(--digi--button--color--icon--function--focus);
  --COLOR--ICON--ACTIVE: var(--digi--button--color--icon--function--active);
  --COLOR--BORDER--DEFAULT: var(--digi--button--color--border--function--default);
  --COLOR--BORDER--HOVER: var(--digi--button--color--border--function--hover);
  --COLOR--BORDER--FOCUS: var(--digi--button--color--border--function--focus);
  --COLOR--BORDER--ACTIVE: var(--digi--button--color--border--function--active);
  --BORDER-RADIUS--DEFAULT: var(--digi--button--border-radius--function--default);
  --BORDER-RADIUS--HOVER: var(--digi--button--border-radius--function--hover);
  --BORDER-RADIUS--FOCUS: var(--digi--button--border-radius--function--focus);
  --BORDER-RADIUS--ACTIVE: var(--digi--button--border-radius--function--active);
  --BORDER-WIDTH--DEFAULT: var(--digi--button--border-width--function--default);
  --BORDER-WIDTH--HOVER: var(--digi--button--border-width--function--hover);
  --BORDER-WIDTH--FOCUS: var(--digi--button--border-width--function--focus);
  --BORDER-WIDTH--ACTIVE: var(--digi--button--border-width--function--active);
  --BORDER-STYLE--DEFAULT: var(--digi--button--border-style--function--default);
  --BORDER-STYLE--HOVER: var(--digi--button--border-style--function--hover);
  --BORDER-STYLE--FOCUS: var(--digi--button--border-style--function--focus);
  --BORDER-STYLE--ACTIVE: var(--digi--button--border-style--function--active);
  --FONT-WEIGHT: var(--digi--button--font-weight--function);
}
:host .digi-button--variation-function:hover, :host .digi-button--variation-function:focus {
  text-decoration: underline;
}
:host .digi-button--size-small {
  --FONT-SIZE: var(--digi--button--font-size--small);
  --PADDING: var(--digi--button--padding--small);
  --MIN-HEIGHT: var(--digi--button--min-height--small);
}
:host .digi-button--size-medium {
  --FONT-SIZE: var(--digi--button--font-size--medium);
  --PADDING: var(--digi--button--padding--medium);
  --MIN-HEIGHT: var(--digi--button--min-height--small);
}
:host .digi-button ::slotted([slot^=icon]) {
  --digi--icon--height: 1em;
  --digi--icon--width: 1em;
  --digi--icon--color: var(--COLOR--ICON--DEFAULT);
  min-height: 0;
}
@media (any-hover: hover) {
  :host .digi-button:hover {
    background: var(--COLOR--BACKGROUND--HOVER);
    border-radius: var(--BORDER-RADIUS--HOVER);
    border-width: var(--BORDER-WIDTH--HOVER);
    border-style: var(--BORDER-STYLE--HOVER);
    border-color: var(--COLOR--BORDER--HOVER);
    color: var(--COLOR--TEXT--HOVER);
  }
  :host .digi-button:hover ::slotted([slot^=icon]) {
    --digi--icon--color: var(--COLOR--ICON--HOVER);
  }
}
:host .digi-button:focus-visible {
  background: var(--COLOR--BACKGROUND--FOCUS);
  color: var(--COLOR--TEXT--FOCUS);
  border-style: var(--BORDER-STYLE--FOCUS);
  border-color: var(--COLOR--BORDER--FOCUS);
  outline: 2px solid black;
  outline-offset: 2px;
  box-shadow: 0px 0px 0px 5px white;
}
:host .digi-button:focus-visible ::slotted([slot^=icon]) {
  --digi--icon--color: var(--COLOR--ICON--FOCUS);
}
:host .digi-button:active {
  background: var(--COLOR--BACKGROUND--ACTIVE);
  color: var(--COLOR--TEXT--ACTIVE);
}
:host .digi-button:active ::slotted([slot^=icon]) {
  --digi--icon--color: var(--COLOR--ICON--ACTIVE);
}
:host .digi-button--icon, :host .digi-button--icon-secondary {
  --digi--button--display: flex;
  align-items: center;
  justify-content: var(--digi--button--justify-content--default);
  gap: var(--digi--button--icon--spacing);
}
:host .digi-button--full-width {
  --digi--button--width: 100%;
  --digi--button--text-align--default: var(--digi--button--text-align--full-width);
  --digi--button--justify-content--default: var(--digi--button--justify-content--full-width);
}