:host { display: inline-flex; justify-content: center; align-items: center; gap: var(--fds-spacing-050); cursor: pointer; box-sizing: border-box; }
:host([width="stretched"]) { width: 100%; }
button { color-scheme: unset; forced-color-adjust: unset; mask: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; align-content: unset; align-items: center; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: var(--fds-spacing-050); column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: flex; dominant-baseline: unset; dynamic-range-limit: unset; -electron-corner-smoothing: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; justify-content: center; justify-items: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: 24px; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; white-space: nowrap; text-wrap-style: unset; timeline-scope: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; }
button > * { line-height: 24px; }
:host(:not(.has-label)) .button-label-wrapper { display: none; }
.button-label-wrapper { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:host([size="tiny"]) {
  height: 28px; padding: 6px;
  & svg { height: 16px; width: 16px; }
}
:host([size="tiny"]) button { min-width: 16px; }
:host([size="tiny"]) button > * { line-height: 20px; }
:host([size="tiny"].has-label) { padding: 6px 12px; }
:host([size="small"]) {
  height: 36px; padding: var(--fds-spacing-100);
  & svg { height: 20px; width: 20px; }
}
:host([size="small"]) button > * { line-height: 20px; }
:host([size="small"]) button { min-width: 20px; }
:host([size="regular"]) { height: 48px; padding: 12px; }
:host([size="regular"].has-label) {
  min-width: 150px;
  & button:has(.leading-icon + .button-label-wrapper + .trailing-icon) { min-width: 180px; }
}
:host([size="regular"][type="secondary"]) { padding: 10px; }
:host([size="large"]) { height: 52px; padding: 14px; }
:host([size="large"].has-label) {
  min-width: 150px;
  & button:has(.leading-icon + .button-label-wrapper + .trailing-icon) { min-width: 180px; }
}
:host([size="large"][type="secondary"]) { padding: 12px; }
:host([shape="default"]) { border-radius: var(--fds-border-radius-btn-default); }
:host([shape="alternate"]) { border-radius: var(--fds-border-radius-btn-alternate); }
:host([color="on-header"]) { background: var(--fdsp-button-on-header-background-color, var(--fds-btn-accent)); color: var(--fdsp-button-on-header-color, var(--fds-on-btn-accent)); }
:host([color="on-header"]:hover) { background: var(--fdsp-button-on-header-hover-background-color, var(--fds-btn-accent-hover)); }
:host([color="on-header"]:active) { background: var(--fdsp-button-on-header-active-background-color, var(--fds-btn-accent-active)); }
:host([color="on-surface-accent"]) { background: var(--fds-btn-accent); color: var(--fds-on-btn-accent); }
:host([color="on-surface-accent"]:hover) { background: var(--fdsp-button-on-surface-accent-hover-background-color, var(--fds-btn-accent-hover)); }
:host([color="on-surface-accent"]:active) { background: var(--fdsp-button-on-surface-accent-active-background-color, var(--fds-btn-accent-active)); }
:host([color="on-surface"]), :host([color="on-surface-default"]) { background: var(--fdsp-button-on-surface-background-color, var(--fds-btn-default)); color: var(--fdsp-button-on-surface-color, var(--fds-on-btn-default)); }
:host([color="on-surface"]:hover), :host([color="on-surface-default"]:hover) { background: var(--fdsp-button-on-surface-hover-background-color, var(--fds-btn-default-hover)); }
:host([color="on-surface"]:active), :host([color="on-surface-default"]:active) { background: var(--fdsp-button-on-surface-active-background-color, var(--fds-btn-default-active)); }
:host([color="on-alternate-surface"]) { background: var(--fdsp-button-on-alternate-surface-background-color, var(--fds-btn-alternate-accent)); color: var(--fdsp-button-on-alternate-surface-color, var(--fds-on-btn-alternate-accent)); }
:host([color="on-alternate-surface"]:hover) { background: var(--fdsp-button-on-alternate-surface-hover-background-color, var(--fds-btn-alternate-accent-hover)); }
:host([color="on-alternate-surface"]:active) { background: var(--fdsp-button-on-alternate-surface-active-background-color, var(--fds-btn-alternate-accent-active)); }
:host([color="alternate-surface-variant"]) { background: var(--fdsp-button-on-alternate-surface-variant-background-color, var(--fds-alternate-surface-variant)); color: var(--fdsp-button-on-alternate-surface-variant-color, var(--fds-on-alternate-surface-m)); }
:host([color="alternate-surface-variant"]:hover) { background: var(   --fdsp-button-on-alternate-surface-variant-hover-background-color,   var(--fds-alternate-surface-variant-hover)  ); }
:host([color="alternate-surface-variant"]:active) { background: var(   --fdsp-button-on-alternate-surface-variant-active-background-color,   var(--fds-alternate-surface-variant-active)  ); }
:host([color="on-alternate-surface-accent"]) { background: var(--fdsp-button-on-alternate-surface-accent-background-color, var(--secondary)); color: var(--fdsp-button-on-alternate-surface-accent-color, var(--on-secondary)); }
:host([color="on-alternate-surface-accent"]:hover) { background: var(--fdsp-button-on-alternate-surface-accent-hover-background-color, var(--fds-btn-accent-hover)); }
:host([color="on-alternate-surface-accent"]:active) { background: var(--fdsp-button-on-alternate-surface-accent-active-background-color, var(--fds-btn-accent-active)); }
:host([type="secondary"]), :host([type="tertiary"]) { background: none; }
:host([type="secondary"][color="on-header"]) { color: var(--fdsp-button-secondary-on-header-color, var(--fds-btn-on-header-default)); border: 1.5px solid var(--fds-btn-on-header-default); }
:host([type="secondary"][color="on-header"]:hover) { background: var(   --fdsp-button-secondary-on-header-hover-background-color,   var(--fds-btn-on-alternate-surface-hover)  ); }
:host([type="secondary"][color="on-header"]:active) { background: var(   --fdsp-button-secondary-on-header-active-background-color,   var(--fds-btn-on-alternate-surface-active)  ); }
:host([type="secondary"][color="on-surface-accent"]), :host([type="secondary"][color="on-surface"]) { color: var(--fdsp-button-secondary-on-surface-color, var(--fds-btn-on-surface-default)); border: 1.5px solid var(--fds-btn-on-surface-default); }
:host([type="secondary"][color="on-surface-default"]) { color: var(--fdsp-button-secondary-on-surface-default-color, var(--fds-btn-on-surface-default)); border: 1.5px solid var(--fds-btn-on-surface-default); }
:host([type="secondary"][color="on-surface-default"]:hover), :host([type="secondary"][color="on-surface-accent"]:hover), :host([type="secondary"][color="on-surface"]:hover) { background: var(--fdsp-button-secondary-on-surface-hover-background-color, var(--fds-btn-on-surface-hover)); }
:host([type="secondary"][color="on-surface-default"]:active), :host([type="secondary"][color="on-surface-accent"]:active), :host([type="secondary"][color="on-surface"]:active) { background: var(--fdsp-button-secondary-on-surface-active-background-color, var(--fds-btn-on-surface-active)); }
:host([type="secondary"][color="on-alternate-surface"]) { color: var(--fdsp-button-secondary-on-alternate-surface-color, var(--fds-btn-on-alternate-surface-default)); border: 1.5px solid var(--fds-btn-on-alternate-surface-default); }
:host([type="secondary"][color="on-alternate-surface-accent"]) { color: var(--fdsp-button-secondary-on-alternate-surface-accent-color, var(--fds-btn-on-alternate-surface-default)); border: 1.5px solid var(--fds-btn-on-alternate-surface-default); }
:host([type="secondary"][color="on-alternate-surface-default"]) { color: var(--fdsp-button-secondary-on-alternate-surface-default-color, var(--fds-btn-on-alternate-surface-default)); border: 1.5px solid var(--fds-btn-on-alternate-surface-default); }
:host([type="secondary"][color="on-alternate-surface-default"]:hover), :host([type="secondary"][color="on-alternate-surface-accent"]:hover), :host([type="secondary"][color="on-alternate-surface"]:hover) { background: var(   --fdsp-button-secondary-on-alternate-surface-hover-color,   var(--fds-btn-on-alternate-surface-hover)  ); }
:host([type="secondary"][color="on-alternate-surface-default"]:active), :host([type="secondary"][color="on-alternate-surface-accent"]:active), :host([type="secondary"][color="on-alternate-surface"]:active) { background: var(   --fdsp-button-secondary-on-alternate-surface-active-color,   var(--fds-btn-on-alternate-surface-active)  ); }
:host([type="tertiary"][color="on-header"]) { color: var(--fdsp-button-tertiary-on-header-color, var(--fds-on-header)); }
:host([type="tertiary"][color="on-header"]:hover) { background: var(--fdsp-button-tertiary-on-header-background-color, var(--fds-btn-on-alternate-surface-hover)); }
:host([type="tertiary"][color="on-header"]:active) { background: var(   --fdsp-button-tertiary-on-header-active-background-color,   var(--fds-btn-on-alternate-surface-active)  ); }
:host([type="tertiary"][color="on-surface"]), :host([type="tertiary"][color="on-surface-accent"]) { color: var(--fdsp-button-tertiary-on-surface-color, var(--fds-btn-on-surface-default)); }
:host([type="tertiary"][color="on-surface-default"]) { color: var(--fdsp-button-tertiary-on-surface-default-color, var(--fds-btn-on-surface-default)); }
:host([type="tertiary"][color="on-surface"]:hover), :host([type="tertiary"][color="on-surface-accent"]:hover), :host([type="tertiary"][color="on-surface-default"]:hover) { background: var(--fdsp-button-tertiary-on-surface-hover-background-color, var(--fds-btn-on-surface-hover)); }
:host([type="tertiary"][color="on-surface"]:active), :host([type="tertiary"][color="on-surface-accent"]:active), :host([type="tertiary"][color="on-surface-default"]:active) { background: var(--fdsp-button-tertiary-on-surface-active-background-color, var(--fds-btn-on-surface-active)); }
:host([type="tertiary"][color="on-alternate-surface"]) { color: var(--fdsp-button-tertiary-on-alternate-surface-color, var(--fds-btn-on-alternate-surface-default)); }
:host([type="tertiary"][color="on-alternate-surface-accent"]) { color: var(--fdsp-button-tertiary-on-alternate-surface-accent-color, var(--fds-btn-on-alternate-surface-default)); }
:host([type="tertiary"][color="on-alternate-surface-default"]) { color: var(--fdsp-button-tertiary-on-alternate-surface-default-color, var(--fds-btn-on-alternate-surface-default)); }
:host([type="tertiary"][color="on-alternate-surface"]:hover), :host([type="tertiary"][color="on-alternate-surface-accent"]:hover), :host([type="tertiary"][color="on-alternate-surface-default"]:hover) { background: var(   --fdsp-button-tertiary-on-alternate-surface-hover-background-color,   var(--fds-btn-on-alternate-surface-hover)  ); }
:host([type="tertiary"][color="on-alternate-surface"]:active), :host([type="tertiary"][color="on-alternate-surface-accent"]:active), :host([type="tertiary"][color="on-alternate-surface-default"]:active) { background: var(   --fdsp-button-tertiary-on-alternate-surface-active-background-color,   var(--fds-btn-on-alternate-surface-active)  ); }
:host([disabled]) { pointer-events: none; background: var(--fdsp-button-disabled-background-color, var(--fds-on-surface-low)); }
.button-label-wrapper,
button > * {
	font: var(--fds-paragraphs-regular-bold);
	color: inherit;
}
:host([size="small"]) .button-label-wrapper,
:host([size="small"]) button > * {
	font: var(--fds-paragraphs-small-bold);
	color: inherit;
}