.dsa-button {
  --dsa-button--padding: 0.75em 1.5em;
  --dsa-button--border-width: var(--ks-border-width-default);
  --dsa-button--border-radius: var(--ks-border-radius-control);
  --dsa-button--font-weight: var(--ks-font-weight-semi-bold, var(--ks-font-weight-bold));
  --dsa-button--text-transform: default;
  --dsa-button_small--font: var(--ks-font-interface-s);
  --dsa-button_medium--font: var(--ks-font-interface-m);
  --dsa-button_large--font: var(--ks-font-interface-l);
  --dsa-button_primary--color: var(--ks-text-color-on-primary);
  --dsa-button_primary--color_hover: var(--ks-text-color-on-primary);
  --dsa-button_primary--color_active: var(--ks-text-color-on-primary);
  --dsa-button_primary--background-color: var(--ks-background-color-primary-interactive);
  --dsa-button_primary--background-color_hover: var(--ks-background-color-primary-interactive-hover);
  --dsa-button_primary--background-color_active: var(--ks-background-color-primary-interactive-active);
  --dsa-button_secondary--color: var(--ks-text-color-default);
  --dsa-button_secondary--color_hover: var(--ks-text-color-default);
  --dsa-button_secondary--color_active: var(--ks-text-color-default);
  --dsa-button_secondary--background-color: var(--ks-background-color-interface-interactive);
  --dsa-button_secondary--background-color_hover: var(--ks-background-color-interface-interactive-hover);
  --dsa-button_secondary--background-color_active: var(--ks-background-color-interface-interactive-active);
  --dsa-button_terciary--color: var(--ks-text-color-default);
  --dsa-button_terciary--color_hover: var(--ks-text-color-default);
  --dsa-button_terciary--color_active: var(--ks-text-color-default);
  --dsa-button_terciary--border-color: var(--ks-border-color-interface-interactive);
  --dsa-button_terciary--border-color_hover: var(--ks-border-color-interface-interactive-hover);
  --dsa-button_terciary--border-color_active: var(--ks-border-color-interface-interactive-active);
  --dsa-button_terciary--background-color_hover: transparent;
  --dsa-button_terciary--background-color_active: transparent;
}

.dsa-button.c-button {
  --c-button--border-radius: var(--dsa-button--border-radius, var(--ks-border-radius-control));
  --c-button--padding: var(--dsa-button--padding, 0.75em 2em);
  --c-button--font-weight: var(--dsa-button--font-weight, var(--ks-font-weight-semi-bold));
  --c-button--border-width: var(--dsa-button--border-width, var(--ks-border-width-default));
  text-transform: var(--dsa-button--text-transform);
  transition: var(--dsa-button--transition, var(--ks-transition-hover));
}
.dsa-button.c-button .icon {
  margin-left: var(--ks-spacing-xxs);
}
.dsa-button.c-button.c-button--small {
  --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
}
.dsa-button.c-button.c-button--medium {
  --c-button--font: var(--dsa-button_medium--font, var(--ks-font-interface-m));
}
.dsa-button.c-button.c-button--large {
  --c-button--font: var(--dsa-button_large--font, var(--ks-font-interface-l));
}
.dsa-button.c-button.c-button--solid {
  --c-button--color: var(--dsa-button_primary--color, var(--ks-text-color-on-primary));
  --c-button--color-hover: var(--dsa-button_primary--color_hover, var(--ks-text-color-on-primary));
  --c-button--color-active: var(--dsa-button_primary--color_active, var(--ks-text-color-on-primary));
  --c-button--border-color: var(--dsa-button_primary--border-color, none);
  --c-button--border-color-hover: var(--dsa-button_primary--border-color_hover, none);
  --c-button--border-color-active: var(--dsa-button_primary--border-color_active, none);
  --c-button--border-color-selected: var(--dsa-button_primary--border-color_selected, none);
  --c-button--background-color: var(
    --dsa-button_primary--background-color,
    var(--ks-background-color-primary-interactive)
  );
  --c-button--background-color-hover: var(
    --dsa-button_primary--background-color_hover,
    var(--ks-background-color-primary-interactive-hover)
  );
  --c-button--background-color-active: var(
    --dsa-button_primary--background-color_active,
    var(--ks-background-color-primary-interactive-active)
  );
  --c-button--background-color-selected: var(
    --dsa-button_primary--background-color_selected,
    var(--ks-background-color-primary-interactive-selected)
  );
}
.dsa-button.c-button.c-button--clear {
  padding: var(--dsa-button--padding);
  --c-button--color: var(--dsa-button_secondary--color, var(--ks-text-color-default));
  --c-button--color-hover: var(--dsa-button_secondary--color_hover, var(--ks-text-color-default));
  --c-button--color-active: var(--dsa-button_secondary--color_active, var(--ks-text-color-default));
  --c-button--border-color: var(--dsa-button_secondary--border-color, none);
  --c-button--border-color-hover: var(--dsa-button_secondary--border-color_hover, none);
  --c-button--border-color-active: var(--dsa-button_secondary--border-color_active, none);
  --c-button--border-color-selected: var(--dsa-button_secondary--border-color_selected, none);
  --c-button--background-color: var(
    --dsa-button_secondary--background-color,
    var(--ks-background-color-clear-interactive)
  );
  --c-button--background-color-hover: var(
    --dsa-button_secondary--background-color_hover,
    var(--ks-background-color-clear-interactive-hover)
  );
  --c-button--background-color-active: var(
    --dsa-button_secondary--background-color_active,
    var(--ks-background-color-clear-interactive-active)
  );
  --c-button--background-color-selected: var(
    --dsa-button_secondary--background-color_selected,
    var(--ks-background-color-clear-interactive-selected)
  );
}
.dsa-button.c-button.c-button--outline {
  padding: var(--dsa-button--padding);
  --c-button--color: var(--dsa-button_terciary--color, var(--ks-text-color-default));
  --c-button--color-hover: var(--dsa-button_terciary--color_hover, var(--ks-text-color-default));
  --c-button--color-active: var(--dsa-button_terciary--color_active, var(--ks-text-color-default));
  --c-button--border-color: var(--dsa-button_terciary--border-color, var(--ks-border-color-interface-interactive));
  --c-button--border-color-hover: var(
    --dsa-button_terciary--border-color_hover,
    var(--ks-border-color-interface-interactive-hover)
  );
  --c-button--border-color-active: var(
    --dsa-button_terciary--border-color_active,
    var(--ks-border-color-interface-interactive-active)
  );
  --c-button--border-color-selected: var(
    --dsa-button_terciary--border-color-selected,
    var(--ks-border-color-interface-interactive_selected)
  );
  --c-button--background-color: var(--dsa-button_terciary--background-color, none);
  --c-button--background-color-hover: var(--dsa-button_terciary--background-color_hover, none);
  --c-button--background-color-active: var(--dsa-button_terciary--background-color_active, none);
  --c-button--background-color-selected: var(--dsa-button_terciary--background-color_selected, none);
}
.dsa-button.c-button {
  transition-property: transform, background-color, color, border;
}
.dsa-button.c-button:disabled {
  pointer-events: none;
}