/** TS Design System: historical button compatibility. */

/* The old neutral base remains available, but is not required by new variants. */
.elementor .elementor-widget-button.btn > .elementor-widget-container > .elementor-button,
.elementor .elementor-widget-button.btn > .elementor-button,
.elementor .elementor-button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-m))) !important;
  padding-block: var(--tsds-button-py, var(--btn-py-m)) !important;
  padding-inline: var(--tsds-button-px, var(--btn-px-m)) !important;
  border: var(--btn-border-width) solid var(--tsds-button-border, var(--btn-border, transparent)) !important;
  border-radius: var(--tsds-button-radius-override, var(--tsds-button-variant-radius, var(--btn-radius-current, var(--btn-radius)))) !important;
  background: var(--tsds-button-bg, var(--btn-bg, transparent)) !important;
  color: var(--tsds-button-color, var(--btn-color, inherit)) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  cursor: pointer;
  transition:
    background-color var(--btn-transition-duration) var(--btn-transition-easing),
    border-color var(--btn-transition-duration) var(--btn-transition-easing),
    color var(--btn-transition-duration) var(--btn-transition-easing),
    opacity var(--btn-transition-duration) var(--btn-transition-easing);
}

/* Historical button-specific icon-gap names map to the shared UI-gap scale. */
.elementor .elementor-widget-button.btn-ig-0,
.elementor .elementor-button.btn-ig-0 { --tsds-icon-gap: var(--ui-gap-0); }
.elementor .elementor-widget-button.btn-ig-xxs,
.elementor .elementor-button.btn-ig-xxs { --tsds-icon-gap: var(--btn-ig-xxs); }
.elementor .elementor-widget-button.btn-ig-xs,
.elementor .elementor-button.btn-ig-xs { --tsds-icon-gap: var(--btn-ig-xs); }
.elementor .elementor-widget-button.btn-ig-s,
.elementor .elementor-button.btn-ig-s { --tsds-icon-gap: var(--btn-ig-s); }
.elementor .elementor-widget-button.btn-ig-m,
.elementor .elementor-button.btn-ig-m { --tsds-icon-gap: var(--btn-ig-m); }
.elementor .elementor-widget-button.btn-ig-l,
.elementor .elementor-button.btn-ig-l { --tsds-icon-gap: var(--btn-ig-l); }
.elementor .elementor-widget-button.btn-icon,
.elementor .elementor-button.btn-icon { --tsds-icon-gap: var(--btn-ig-s); }

/* Apply legacy gap aliases to Elementor's actual icon/text wrapper. */
.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-widget-container > .elementor-button,
.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-button,
.elementor .elementor-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon),
.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-widget-container > .elementor-button > .elementor-button-content-wrapper,
.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-button > .elementor-button-content-wrapper,
.elementor .elementor-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-button-content-wrapper {
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-m))) !important;
}

.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-widget-container > .elementor-button > .elementor-button-content-wrapper > .elementor-button-icon,
.elementor .elementor-widget-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-button > .elementor-button-content-wrapper > .elementor-button-icon,
.elementor .elementor-button:is(.btn, .btn-ig-0, .btn-ig-xxs, .btn-ig-xs, .btn-ig-s, .btn-ig-m, .btn-ig-l, .btn-icon) > .elementor-button-content-wrapper > .elementor-button-icon {
  margin-inline: 0 !important;
}