@scania/tegel/dist/collection/components/button/button.css

Tegel Design System

:root,
.tds-mode-light {
  --tds-btn-primary-background: var(--background-clickable-primary-primary);
  --tds-btn-primary-background-hover: var(--background-clickable-primary-primary-hover);
  --tds-btn-primary-background-active: var(--background-clickable-primary-pressed);
  --tds-btn-primary-background-focus: var(--background-clickable-primary-focus);
  --tds-btn-primary-background-disabled-primary: var(--background-clickable-primary-disabled);
  --tds-btn-primary-background-disabled-secondary: var(--tds-white);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  --tds-btn-primary-color: var(--tds-white);
  --tds-btn-primary-color-hover: var(--tds-white);
  --tds-btn-primary-color-active: var(--tds-white);
  --tds-btn-primary-color-focus: var(--tds-white);
  --tds-btn-primary-color-disabled: var(--tds-grey-250);
  --tds-btn-primary-border-color: transparent;
  --tds-btn-primary-border-color-hover: transparent;
  --tds-btn-primary-border-color-active: var(--tds-blue-700);
  --tds-btn-primary-border-color-focus: var(--tds-blue-700);
  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
  --tds-btn-primary-border-color-disabled: transparent;
  /* ICON */
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
  --tds-btn-icon-primary-color: var(--tds-grey-50);
  --tds-btn-secondary-background: transparent;
  --tds-btn-secondary-color: var(--tds-black);
  --tds-btn-secondary-border-color: var(--tds-grey-350);
  --tds-btn-secondary-background-hover: var(--tds-blue-700);
  --tds-btn-secondary-color-hover: var(--tds-white);
  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
  --tds-btn-secondary-background-active: transparent;
  --tds-btn-secondary-color-active: var(--tds-black);
  --tds-btn-secondary-border-color-active: var(--tds-grey-650);
  --tds-btn-secondary-background-focus: var(--tds-blue-700);
  --tds-btn-secondary-color-focus: var(--tds-white);
  --tds-btn-secondary-border-color-focus: var(--tds-white);
  --tds-btn-secondary-outline-color: var(--tds-grey-350);
  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
  --tds-btn-secondary-background-disabled: transparent;
  --tds-btn-secondary-color-disabled: var(--tds-grey-250);
  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
  --tds-btn-icon-secondary-color-focus: var(--tds-black);
  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
  --tds-btn-icon-secondary-fill-active: var(--tds-grey-950);
  /* ICON */
  --tds-btn-icon-secondary-fill: var(--tds-grey-950);
  --tds-btn-icon-secondary-color: var(--tds-grey-950);
  /* ICON HOVER */
  --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
  --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
  /* ICON HOVER */
  --tds-btn-icon-secondary-color-active: var(--tds-grey-950);
  --tds-btn-ghost-background: transparent;
  --tds-btn-ghost-color: var(--tds-grey-950);
  --tds-btn-ghost-border-color: transparent;
  --tds-btn-ghost-background-hover: transparent;
  --tds-btn-ghost-color-hover: var(--tds-grey-950);
  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
  --tds-btn-ghost-outline-color-hover: var(--tds-grey-350);
  --tds-btn-ghost-background-active: transparent;
  --tds-btn-ghost-color-active: var(--tds-grey-950);
  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
  --tds-btn-ghost-background-focus: transparent;
  --tds-btn-ghost-color-focus: var(--tds-grey-950);
  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
  --tds-btn-ghost-background-disabled: transparent;
  --tds-btn-ghost-color-disabled: var(--tds-grey-250);
  --tds-btn-ghost-border-color-disabled: transparent;
  /* ICON */
  --tds-btn-icon-ghost-fill: var(--tds-grey-950);
  --tds-btn-icon-ghost-color: var(--tds-grey-950);
  --tds-btn-danger-background: var(--scania-extended-red-400);
  --tds-btn-danger-color: var(--tds-white);
  --tds-btn-danger-border-color: transparent;
  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
  --tds-btn-danger-color-hover: var(--tds-white);
  --tds-btn-danger-border-color-hover: transparent;
  --tds-btn-danger-background-active: var(--scania-extended-red-600);
  --tds-btn-danger-color-active: var(--tds-white);
  --tds-btn-danger-border-color-active: var(--tds-red-700);
  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
  --tds-btn-danger-color-focus: var(--tds-white);
  --tds-btn-danger-border-color-focus: var(--tds-red-500);
  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
  --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-danger-color-disabled: var(--tds-grey-250);
  --tds-btn-danger-border-color-disabled: transparent;
  /* ICON */
  --tds-btn-icon-danger-fill: var(--tds-grey-50);
  --tds-btn-icon-danger-color: var(--tds-grey-50);
}
:root .tds-mode-variant-primary,
.tds-mode-light .tds-mode-variant-primary {
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
}
:root .tds-mode-variant-secondary,
.tds-mode-light .tds-mode-variant-secondary {
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
}

.tds-mode-dark {
  --tds-btn-primary-background: var(--scania-blue-400);
  --tds-btn-primary-background-hover: var(--scania-blue-500);
  --tds-btn-primary-background-active: var(--scania-blue-600);
  --tds-btn-primary-background-focus: var(--scania-blue-500);
  --tds-btn-primary-border-color-focus: var(--tds-white);
  --tds-btn-primary-border-color: transparent;
  --tds-btn-primary-border-color-hover: var(--tds-white);
  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
  /* ICON */
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
  --tds-btn-icon-primary-color: var(--tds-grey-50);
  --tds-btn-secondary-background: transparent;
  --tds-btn-secondary-color: var(--tds-white);
  --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
  --tds-btn-secondary-background-hover: var(--tds-blue-500);
  --tds-btn-secondary-color-hover: var(--tds-white);
  --tds-btn-secondary-border-color-hover: var(--tds-white);
  --tds-btn-secondary-background-active: var(--scania-blue-600);
  --tds-btn-secondary-color-active: var(--tds-white);
  --tds-btn-secondary-border-color-active: var(--tds-grey-200);
  --tds-btn-secondary-background-focus: var(--scania-blue-500);
  --tds-btn-secondary-color-focus: var(--tds-white);
  --tds-btn-secondary-border-color-focus: var(--tds-white);
  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
  --tds-btn-secondary-outline-color: var(--tds-white);
  --tds-btn-secondary-background-disabled: transparent;
  --tds-btn-secondary-color-disabled: var(--tds-grey-500);
  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
  --tds-btn-icon-secondary-color-focus: var(--tds-white);
  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
  /* ICON */
  --tds-btn-icon-secondary-fill: var(--tds-grey-50);
  --tds-btn-icon-secondary-color: var(--tds-grey-50);
  --tds-btn-ghost-background: transparent;
  --tds-btn-ghost-color: var(--tds-white);
  --tds-btn-ghost-border-color: transparent;
  --tds-btn-ghost-background-hover: transparent;
  --tds-btn-ghost-color-hover: var(--tds-white);
  --tds-btn-ghost-border-color-hover: var(--tds-grey-400);
  --tds-btn-ghost-outline-color-hover: var(--scania-neutral-transparent-inverse-400);
  --tds-btn-ghost-background-active: transparent;
  --tds-btn-ghost-color-active: var(--tds-white);
  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
  --tds-btn-ghost-background-focus: transparent;
  --tds-btn-ghost-color-focus: var(--tds-white);
  --tds-btn-ghost-border-color-focus: var(--tds-white);
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
  --tds-btn-ghost-background-disabled: transparent;
  --tds-btn-ghost-color-disabled: var(--tds-grey-500);
  --tds-btn-ghost-border-color-disabled: transparent;
  /* ICON */
  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
  --tds-btn-icon-ghost-color: var(--tds-grey-50);
  --tds-btn-danger-background: var(--scania-extended-red-400);
  --tds-btn-danger-color: var(--tds-white);
  --tds-btn-danger-border-color: transparent;
  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
  --tds-btn-danger-color-hover: var(--tds-white);
  --tds-btn-danger-border-color-hover: var(--tds-white);
  --tds-btn-danger-background-active: var(--scania-extended-red-600);
  --tds-btn-danger-color-active: var(--tds-white);
  --tds-btn-danger-border-color-active: transparent;
  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
  --tds-btn-danger-color-focus: var(--tds-white);
  --tds-btn-danger-border-color-focus: var(--tds-white);
  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-danger-color-disabled: var(--tds-grey-500);
  --tds-btn-danger-border-color-disabled: transparent;
  /* ICON */
  --tds-btn-icon-danger-fill: var(--tds-white);
  --tds-btn-icon-danger-color: var(--tds-white);
}
.tds-mode-dark .tds-mode-variant-primary {
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
}
.tds-mode-dark .tds-mode-variant-secondary {
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
}

button {
  box-sizing: border-box;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  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(--scania-blue-400);
}
button:focus-visible {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  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: 2px;
}
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 {
  background: var(--tds-btn-primary-background-disabled);
  border-color: var(--tds-btn-primary-border-color-disabled);
  color: var(--tds-btn-primary-color-disabled);
  outline-color: var(--tds-btn-primary-outline-color-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 {
  background: var(--tds-btn-secondary-background-disabled);
  border-color: var(--tds-btn-secondary-border-color-disabled);
  color: var(--tds-btn-secondary-color-disabled);
  outline-color: var(--tds-btn-secondary-outline-color-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 {
  background: var(--tds-btn-ghost-background-disabled);
  border-color: var(--tds-btn-ghost-border-color-disabled);
  color: var(--tds-btn-ghost-color-disabled);
  outline-color: var(--tds-btn-ghost-outline-color-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 {
  background: var(--tds-btn-danger-background-disabled);
  border-color: var(--tds-btn-danger-border-color-disabled);
  color: var(--tds-btn-danger-color-disabled);
  outline-color: var(--tds-btn-danger-outline-color-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;
}