tds-button {
  --tds-btn-border-radius: calc(var(--component-button-border-radius-default) * 1px);
  --tds-btn-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
  --tds-btn-primary-background: var(--component-button-background-standard-primary-default);
  --tds-btn-primary-background-hover: var(--component-button-background-standard-primary-hover);
  --tds-btn-primary-background-active: var(--component-button-background-standard-primary-active);
  --tds-btn-primary-background-focus: var(--component-button-background-standard-primary-default);
  --tds-btn-primary-color: var(--component-button-text-standard-primary-default);
  --tds-btn-primary-color-hover: var(--component-button-text-standard-primary-hover);
  --tds-btn-primary-color-active: var(--component-button-text-standard-primary-active);
  --tds-btn-primary-color-focus: var(--component-button-text-standard-primary-hover);
  --tds-btn-primary-border-color: var(--component-button-border-standard-primary-default);
  --tds-btn-primary-border-color-hover: var(--component-button-border-standard-primary-hover);
  --tds-btn-primary-border-color-active: var(--component-button-border-standard-primary-active);
  --tds-btn-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
  --tds-btn-primary-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-primary-fill: var(--component-button-icon-standard-primary-default);
  --tds-btn-icon-primary-color: var(--component-button-icon-standard-primary-default);
  --tds-btn-icon-primary-fill-hover: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-color-hover: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-fill-active: var(--component-button-icon-standard-primary-active);
  --tds-btn-icon-primary-color-active: var(--component-button-icon-standard-primary-active);
  --tds-btn-icon-primary-fill-focus: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-color-focus: var(--component-button-icon-standard-primary-hover);
  --tds-btn-secondary-background: var(--component-button-background-standard-secondary-default);
  --tds-btn-secondary-background-hover: var(--component-button-background-standard-secondary-hover);
  --tds-btn-secondary-background-active: var(
    --component-button-background-standard-secondary-active
  );
  --tds-btn-secondary-background-focus: var(
    --component-button-background-standard-secondary-default
  );
  --tds-btn-secondary-color: var(--component-button-text-standard-secondary-default);
  --tds-btn-secondary-color-hover: var(--component-button-text-standard-secondary-hover);
  --tds-btn-secondary-color-active: var(--component-button-text-standard-secondary-active);
  --tds-btn-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
  --tds-btn-secondary-border-color: var(--component-button-border-standard-secondary-default);
  --tds-btn-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
  --tds-btn-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
  --tds-btn-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
  --tds-btn-secondary-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-secondary-fill: var(--component-button-icon-standard-secondary-default);
  --tds-btn-icon-secondary-color: var(--component-button-icon-standard-secondary-default);
  --tds-btn-icon-secondary-fill-hover: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-color-hover: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-fill-active: var(--component-button-icon-standard-secondary-active);
  --tds-btn-icon-secondary-color-active: var(--component-button-icon-standard-secondary-active);
  --tds-btn-icon-secondary-fill-focus: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-color-focus: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-ghost-background: var(--component-button-background-standard-tertiary-default);
  --tds-btn-ghost-background-hover: var(--component-button-background-standard-tertiary-hover);
  --tds-btn-ghost-background-active: var(--component-button-background-standard-tertiary-active);
  --tds-btn-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
  --tds-btn-ghost-color: var(--component-button-text-standard-tertiary-default);
  --tds-btn-ghost-color-hover: var(--component-button-text-standard-tertiary-hover);
  --tds-btn-ghost-color-active: var(--component-button-text-standard-tertiary-active);
  --tds-btn-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
  --tds-btn-ghost-border-color: var(--component-button-border-standard-tertiary-default);
  --tds-btn-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
  --tds-btn-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
  --tds-btn-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
  --tds-btn-ghost-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-ghost-fill: var(--component-button-icon-standard-tertiary-default);
  --tds-btn-icon-ghost-color: var(--component-button-icon-standard-tertiary-default);
  --tds-btn-icon-ghost-fill-hover: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-color-hover: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-fill-active: var(--component-button-icon-standard-tertiary-active);
  --tds-btn-icon-ghost-color-active: var(--component-button-icon-standard-tertiary-active);
  --tds-btn-icon-ghost-fill-focus: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-color-focus: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-danger-background: var(--component-button-background-danger-primary-default);
  --tds-btn-danger-background-hover: var(--component-button-background-danger-primary-hover);
  --tds-btn-danger-background-active: var(--component-button-background-danger-primary-active);
  --tds-btn-danger-background-focus: var(--component-button-background-danger-primary-default);
  --tds-btn-danger-color: var(--component-button-text-danger-primary-default);
  --tds-btn-danger-color-hover: var(--component-button-text-danger-primary-hover);
  --tds-btn-danger-color-active: var(--component-button-text-danger-primary-active);
  --tds-btn-danger-color-focus: var(--component-button-text-danger-primary-hover);
  --tds-btn-danger-border-color: var(--component-button-border-danger-primary-default);
  --tds-btn-danger-border-color-hover: var(--component-button-border-danger-primary-hover);
  --tds-btn-danger-border-color-active: var(--component-button-border-danger-primary-active);
  --tds-btn-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
  --tds-btn-danger-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-danger-fill: var(--component-button-icon-danger-primary-default);
  --tds-btn-icon-danger-color: var(--component-button-icon-danger-primary-default);
  --tds-btn-icon-danger-fill-hover: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-color-hover: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-fill-active: var(--component-button-icon-danger-primary-active);
  --tds-btn-icon-danger-color-active: var(--component-button-icon-danger-primary-active);
  --tds-btn-icon-danger-fill-focus: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-color-focus: var(--component-button-icon-danger-primary-hover);
}

/* Typography Usage mixins */
button {
  box-sizing: border-box;
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: inline-flex;
  align-items: center;
  border-radius: var(--tds-btn-border-radius);
  border: none;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  height: 56px;
  padding: var(--tds-spacing-element-20);
  border: 1px solid transparent;
}
button * {
  box-sizing: border-box;
}
button:focus {
  outline: 1px solid var(--component--focus-ring-color-strong);
}
button:focus-visible {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
button.xs {
  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
  height: 24px;
  font-size: 12px;
  border-radius: var(--tds-btn-border-radius);
}
button.sm {
  padding: var(--tds-spacing-element-12);
  height: 40px;
}
button.sm.icon {
  padding: 10px var(--tds-spacing-element-12);
}
button.sm.only-icon {
  padding: 11px;
}
button.md {
  padding: var(--tds-spacing-element-16);
  height: 48px;
}
button.md.icon {
  padding: 14px var(--tds-spacing-element-16);
}
button.md.only-icon {
  padding: 13px;
}
button.lg {
  padding: var(--tds-spacing-element-20);
  height: 56px;
}
button.lg.icon {
  padding: 18px var(--tds-spacing-element-20);
}
button.lg.only-icon {
  padding: 17px;
}
button.fullbleed {
  width: 100%;
  display: flex;
  justify-content: center;
}
button.animation-fade {
  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
}
button.primary {
  background: var(--tds-btn-primary-background);
  border-color: var(--tds-btn-primary-border-color);
  color: var(--tds-btn-primary-color);
  outline-color: var(--tds-btn-primary-outline-color);
}
button.primary.icon {
  fill: var(--tds-btn-icon-primary-fill);
  color: var(--tds-btn-icon-primary-fill);
  fill: var(--tds-btn-icon-primary-color);
  color: var(--tds-btn-icon-primary-color);
}
button.primary:hover {
  background: var(--tds-btn-primary-background-hover);
  border-color: var(--tds-btn-primary-border-color-hover);
  color: var(--tds-btn-primary-color-hover);
  outline-color: var(--tds-btn-primary-outline-color-hover);
}
button.primary:hover:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-primary-fill-hover);
  color: var(--tds-btn-icon-primary-fill-hover);
  fill: var(--tds-btn-icon-primary-color-hover);
  color: var(--tds-btn-icon-primary-color-hover);
}
button.primary:focus-visible {
  background: var(--tds-btn-primary-background-focus);
  border-color: var(--tds-btn-primary-border-color-focus);
  color: var(--tds-btn-primary-color-focus);
  outline-color: var(--tds-btn-primary-outline-color-focus);
}
button.primary:focus-visible ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-primary-fill-focus);
  color: var(--tds-btn-icon-primary-fill-focus);
  fill: var(--tds-btn-icon-primary-color-focus);
  color: var(--tds-btn-icon-primary-color-focus);
}
button.primary:active, button.primary.active {
  background: var(--tds-btn-primary-background-active);
  border-color: var(--tds-btn-primary-border-color-active);
  color: var(--tds-btn-primary-color-active);
  outline-color: var(--tds-btn-primary-outline-color-active);
}
button.primary:active:not(.disabled) ::slotted([slot=icon]), button.primary.active:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-primary-fill-active);
  color: var(--tds-btn-icon-primary-fill-active);
  fill: var(--tds-btn-icon-primary-color-active);
  color: var(--tds-btn-icon-primary-color-active);
}
button.primary.disabled, button.primary:disabled {
  opacity: var(--tds-btn-opacity-disabled);
}
button.secondary {
  background: var(--tds-btn-secondary-background);
  border-color: var(--tds-btn-secondary-border-color);
  color: var(--tds-btn-secondary-color);
  outline-color: var(--tds-btn-secondary-outline-color);
}
button.secondary.icon {
  fill: var(--tds-btn-icon-secondary-fill);
  color: var(--tds-btn-icon-secondary-fill);
  fill: var(--tds-btn-icon-secondary-color);
  color: var(--tds-btn-icon-secondary-color);
}
button.secondary:hover {
  background: var(--tds-btn-secondary-background-hover);
  border-color: var(--tds-btn-secondary-border-color-hover);
  color: var(--tds-btn-secondary-color-hover);
  outline-color: var(--tds-btn-secondary-outline-color-hover);
}
button.secondary:hover:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-secondary-fill-hover);
  color: var(--tds-btn-icon-secondary-fill-hover);
  fill: var(--tds-btn-icon-secondary-color-hover);
  color: var(--tds-btn-icon-secondary-color-hover);
}
button.secondary:focus-visible {
  background: var(--tds-btn-secondary-background-focus);
  border-color: var(--tds-btn-secondary-border-color-focus);
  color: var(--tds-btn-secondary-color-focus);
  outline-color: var(--tds-btn-secondary-outline-color-focus);
}
button.secondary:focus-visible ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-secondary-fill-focus);
  color: var(--tds-btn-icon-secondary-fill-focus);
  fill: var(--tds-btn-icon-secondary-color-focus);
  color: var(--tds-btn-icon-secondary-color-focus);
}
button.secondary:active, button.secondary.active {
  background: var(--tds-btn-secondary-background-active);
  border-color: var(--tds-btn-secondary-border-color-active);
  color: var(--tds-btn-secondary-color-active);
  outline-color: var(--tds-btn-secondary-outline-color-active);
}
button.secondary:active:not(.disabled) ::slotted([slot=icon]), button.secondary.active:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-secondary-fill-active);
  color: var(--tds-btn-icon-secondary-fill-active);
  fill: var(--tds-btn-icon-secondary-color-active);
  color: var(--tds-btn-icon-secondary-color-active);
}
button.secondary.disabled, button.secondary:disabled {
  opacity: var(--tds-btn-opacity-disabled);
}
button.ghost {
  background: var(--tds-btn-ghost-background);
  border-color: var(--tds-btn-ghost-border-color);
  color: var(--tds-btn-ghost-color);
  outline-color: var(--tds-btn-ghost-outline-color);
}
button.ghost.icon {
  fill: var(--tds-btn-icon-ghost-fill);
  color: var(--tds-btn-icon-ghost-fill);
  fill: var(--tds-btn-icon-ghost-color);
  color: var(--tds-btn-icon-ghost-color);
}
button.ghost:hover {
  background: var(--tds-btn-ghost-background-hover);
  border-color: var(--tds-btn-ghost-border-color-hover);
  color: var(--tds-btn-ghost-color-hover);
  outline-color: var(--tds-btn-ghost-outline-color-hover);
}
button.ghost:hover:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-ghost-fill-hover);
  color: var(--tds-btn-icon-ghost-fill-hover);
  fill: var(--tds-btn-icon-ghost-color-hover);
  color: var(--tds-btn-icon-ghost-color-hover);
}
button.ghost:focus-visible {
  background: var(--tds-btn-ghost-background-focus);
  border-color: var(--tds-btn-ghost-border-color-focus);
  color: var(--tds-btn-ghost-color-focus);
  outline-color: var(--tds-btn-ghost-outline-color-focus);
}
button.ghost:focus-visible ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-ghost-fill-focus);
  color: var(--tds-btn-icon-ghost-fill-focus);
  fill: var(--tds-btn-icon-ghost-color-focus);
  color: var(--tds-btn-icon-ghost-color-focus);
}
button.ghost:active, button.ghost.active {
  background: var(--tds-btn-ghost-background-active);
  border-color: var(--tds-btn-ghost-border-color-active);
  color: var(--tds-btn-ghost-color-active);
  outline-color: var(--tds-btn-ghost-outline-color-active);
}
button.ghost:active:not(.disabled) ::slotted([slot=icon]), button.ghost.active:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-ghost-fill-active);
  color: var(--tds-btn-icon-ghost-fill-active);
  fill: var(--tds-btn-icon-ghost-color-active);
  color: var(--tds-btn-icon-ghost-color-active);
}
button.ghost.disabled, button.ghost:disabled {
  opacity: var(--tds-btn-opacity-disabled);
}
button.danger {
  background: var(--tds-btn-danger-background);
  border-color: var(--tds-btn-danger-border-color);
  color: var(--tds-btn-danger-color);
  outline-color: var(--tds-btn-danger-outline-color);
}
button.danger.icon {
  fill: var(--tds-btn-icon-danger-fill);
  color: var(--tds-btn-icon-danger-fill);
  fill: var(--tds-btn-icon-danger-color);
  color: var(--tds-btn-icon-danger-color);
}
button.danger:hover {
  background: var(--tds-btn-danger-background-hover);
  border-color: var(--tds-btn-danger-border-color-hover);
  color: var(--tds-btn-danger-color-hover);
  outline-color: var(--tds-btn-danger-outline-color-hover);
}
button.danger:hover:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-danger-fill-hover);
  color: var(--tds-btn-icon-danger-fill-hover);
  fill: var(--tds-btn-icon-danger-color-hover);
  color: var(--tds-btn-icon-danger-color-hover);
}
button.danger:focus-visible {
  background: var(--tds-btn-danger-background-focus);
  border-color: var(--tds-btn-danger-border-color-focus);
  color: var(--tds-btn-danger-color-focus);
  outline-color: var(--tds-btn-danger-outline-color-focus);
}
button.danger:focus-visible ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-danger-fill-focus);
  color: var(--tds-btn-icon-danger-fill-focus);
  fill: var(--tds-btn-icon-danger-color-focus);
  color: var(--tds-btn-icon-danger-color-focus);
}
button.danger:active, button.danger.active {
  background: var(--tds-btn-danger-background-active);
  border-color: var(--tds-btn-danger-border-color-active);
  color: var(--tds-btn-danger-color-active);
  outline-color: var(--tds-btn-danger-outline-color-active);
}
button.danger:active:not(.disabled) ::slotted([slot=icon]), button.danger.active:not(.disabled) ::slotted([slot=icon]) {
  fill: var(--tds-btn-icon-danger-fill-active);
  color: var(--tds-btn-icon-danger-fill-active);
  fill: var(--tds-btn-icon-danger-color-active);
  color: var(--tds-btn-icon-danger-color-active);
}
button.danger.disabled, button.danger:disabled {
  opacity: var(--tds-btn-opacity-disabled);
}

:host(tds-button) {
  display: inline-flex;
  align-items: center;
}
:host(tds-button) ::slotted([slot=icon]) {
  width: var(--tds-spacing-element-20);
  height: var(--tds-spacing-element-20);
}
:host(tds-button) .sm ::slotted([slot=icon]) {
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
}

:host(.disabled:active) {
  pointer-events: none;
}

:host(.disabled) button {
  cursor: not-allowed;
}

:host(.fullbleed) {
  width: 100%;
  justify-content: center;
}

tds-button button {
  display: inline-flex;
  align-items: center;
}
tds-button button.sm::slotted([slot=icon]) {
  margin-left: var(--tds-spacing-element-12);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
}
tds-button button.md::slotted([slot=icon]) {
  margin-left: var(--tds-spacing-element-16);
  width: var(--tds-spacing-element-20);
  height: var(--tds-spacing-element-20);
}
tds-button button.lg::slotted([slot=icon]) {
  margin-left: var(--tds-spacing-element-20);
  width: var(--tds-spacing-element-20);
  height: var(--tds-spacing-element-20);
}
tds-button button.only-icon::slotted([slot=icon]) {
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}