.button {
    padding: var(--space-space-md) var(--space-space-lg);
    font-weight: var(--font-weight-font-font-weight-bold);
    font-size: var(--typography-font-size-label1-md);
    line-height: var(--typography-line-height-label1-md);
    width: fit-content;
    width: -moz-fit-content;
    text-decoration: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.button.disabled {
    background-color: var(--color-surface-surface-disabled);
    color: var(--color-foreground-foreground-disabled);
    pointer-events: none;
    fill: var(--color-foreground-foreground-disabled);
}
.button-primary {
    color: var(--color-foreground-foreground-on-active);
    background-color: var(--color-surface-surface-active);
    border-radius: var(--border-radius-border-border-radius-md);
}
.button-primary:hover {
    color: var(--color-foreground-foreground-on-active);
}
.button--md.button-primary .svg-icon {
    background-color: var(--color-foreground-foreground-on-active);
} 
.button.disabled .svg-icon {
    background-color: var(--color-foreground-foreground-disabled);    
}
.button-secondary {
    color: var(--color-foreground-foreground-active);
    background-color: var(--color-foreground-foreground-on-active);
    border-radius: var(--border-radius-border-border-radius-md);
    border: 1px solid var(--color-foreground-foreground-active);
}
.button-secondary:hover {
    color: var(--color-foreground-foreground-active);
}
.button-secondary.disabled {
    border-color: transparent;
}
.button.icon-only {
    border-radius: 100%;
    padding: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
}
.button-tertiary {
    background: transparent;
    text-decoration: underline;
    border: 0;
    padding: 0;
    color: var(--color-foreground-foreground-active);
}
.button-tertiary:hover {
    color: var(--color-foreground-foreground-active);
}
.button-tertiary.disabled {
    background: transparent;
}
.button-tertiary.icon-only {
    height: fit-content;
    width: fit-content;
    width: -moz-fit-content;
    height: -moz-fit-content;
}
.button--md {
    font-size: var(--typography-font-size-label1-md);
    line-height: var(--typography-line-height-label1-md);
}
.button--sm {
    font-size: var(--typography-font-size-label2-sm);
    line-height: var(--typography-line-height-label2-sm);
}
.button--sm.button-secondary.icon-only, .button--sm.button-primary.icon-only {
    width: 32px;
    height: 32px;
}
.svg-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  background-color: var(--color-foreground-foreground-active);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.inverted .button-primary,
.text_color_white .button-primary {
    background-color: var(--color-background-background-default);
    color: var(--color-foreground-foreground-active);
}
.inverted .button-primary .svg-icon,
.text_color_white .button-primary .svg-icon {
    background-color: var(--color-foreground-foreground-active);
}
.inverted .button-primary.disabled,
.text_color_white .button-primary.disabled {
    background-color: var(--color-surface-surface-on-inverse-disabled);
    color: var(--color-foreground-foreground-on-inverse-disabled);
}
.inverted .button-secondary,
.text_color_white .button-secondary {
    background-color: transparent;
    color: var(--color-border-width-border-width-on-inverse-active);
    border-color: var(--color-border-width-border-width-on-inverse-active);
}
.inverted .button-secondary.disabled,
.text_color_white .button-secondary.disabled {
    background-color: var(--color-surface-surface-on-inverse-disabled);
    color: var(--color-foreground-foreground-on-inverse-disabled);
    border-color: transparent;
}
.inverted .button-secondary .svg-icon,
.text_color_white .button-secondary .svg-icon {
    background-color: var(--color-foreground-foreground-on-inverse-active);
}
.inverted .disabled .svg-icon,
.text_color_white .disabled .svg-icon {
    background-color: var(--color-foreground-foreground-on-inverse-disabled);
}
.inverted .button-tertiary,
.text_color_white .button-tertiary {
    color: var(--color-foreground-foreground-on-inverse-active);
}
.inverted .button-tertiary.disabled,
.text_color_white .button-tertiary.disabled {
    color: var(--color-foreground-foreground-disabled);
}
.inverted .button-tertiary .svg-icon,
.text_color_white .button-tertiary .svg-icon {
    background-color: var(--color-foreground-foreground-on-inverse-active);
}