/** TS Design System: frontend-generic button component with Elementor adapters. */

/*
 * Classes on a button widget only target its own direct button. A class on the
 * .elementor-button itself is also supported. This deliberately avoids the
 * historical `.elementor-element.CLASS .elementor-button` descendant scope.
 */
:is(a, button)[class]:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s)));
  padding-block: var(--tsds-button-py, var(--btn-py-s));
  padding-inline: var(--tsds-button-px, var(--btn-px-s));
  border: var(--btn-border-width) solid var(--tsds-button-border);
  border-radius: var(--tsds-button-radius-override, var(--tsds-button-variant-radius, var(--btn-radius)));
  background: var(--tsds-button-bg);
  color: var(--tsds-button-color);
  font: inherit;
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  opacity: 1;
  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),
    box-shadow var(--btn-transition-duration) var(--btn-transition-easing),
    transform var(--btn-transition-duration) var(--btn-transition-easing);
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-button,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) {
  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-s))) !important;
  padding-block: var(--tsds-button-py, var(--btn-py-s)) !important;
  padding-inline: var(--tsds-button-px, var(--btn-px-s)) !important;
  border: var(--btn-border-width) solid var(--tsds-button-border) !important;
  border-radius: var(--tsds-button-radius-override, var(--tsds-button-variant-radius, var(--btn-radius))) !important;
  background: var(--tsds-button-bg) !important;
  color: var(--tsds-button-color) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  cursor: pointer;
  opacity: 1;
  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),
    box-shadow var(--btn-transition-duration) var(--btn-transition-easing),
    transform var(--btn-transition-duration) var(--btn-transition-easing);
}

/* Existing semantic hooks stay ahead of the historical and Elementor fallbacks. */
:is(a, button).btn-primary,
.elementor .elementor-widget-button.btn-primary,
.elementor .elementor-button.btn-primary {
  --tsds-button-bg: var(--btn-primary-bg, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-color: var(--btn-primary-color, var(--ts-color-on-primary, #fff));
  --tsds-button-border: var(--btn-primary-border, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-bg-hover: var(--btn-primary-bg-hover, var(--tsds-button-bg));
  --tsds-button-color-hover: var(--btn-primary-color-hover, var(--tsds-button-color));
  --tsds-button-border-hover: var(--btn-primary-border-hover, var(--tsds-button-border));
  --tsds-button-focus: var(--btn-primary-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-primary-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

:is(a, button).btn-secondary,
.elementor .elementor-widget-button.btn-secondary,
.elementor .elementor-button.btn-secondary {
  --tsds-button-bg: var(--btn-secondary-bg, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-color: var(--btn-secondary-color, var(--ts-color-on-secondary, #fff));
  --tsds-button-border: var(--btn-secondary-border, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-bg-hover: var(--btn-secondary-bg-hover, var(--tsds-button-bg));
  --tsds-button-color-hover: var(--btn-secondary-color-hover, var(--tsds-button-color));
  --tsds-button-border-hover: var(--btn-secondary-border-hover, var(--tsds-button-border));
  --tsds-button-focus: var(--btn-secondary-focus, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-variant-radius: var(--btn-secondary-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

:is(a, button).btn-outline,
.elementor .elementor-widget-button.btn-outline,
.elementor .elementor-button.btn-outline {
  --tsds-button-bg: var(--btn-outline-bg, transparent);
  --tsds-button-color: var(--btn-outline-color, var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))));
  --tsds-button-border: var(--btn-outline-border, var(--ts-color-border, rgba(18, 20, 23, 0.18)));
  --tsds-button-bg-hover: var(--btn-outline-bg-hover, transparent);
  --tsds-button-color-hover: var(--btn-outline-color-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-border-hover: var(--btn-outline-border-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-focus: var(--btn-outline-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-outline-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

:is(a, button).btn-outline-primary,
.elementor .elementor-widget-button.btn-outline-primary,
.elementor .elementor-button.btn-outline-primary {
  --tsds-button-bg: transparent;
  --tsds-button-color: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-border: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-bg-hover: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-color-hover: var(--ts-color-on-primary, #fff);
  --tsds-button-border-hover: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-focus: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-variant-radius: var(--btn-radius);
  --tsds-button-hover-opacity: 1;
  --tsds-button-active-opacity: 0.8;
}

:is(a, button).btn-outline-secondary,
.elementor .elementor-widget-button.btn-outline-secondary,
.elementor .elementor-button.btn-outline-secondary {
  --tsds-button-bg: transparent;
  --tsds-button-color: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-border: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-bg-hover: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-color-hover: var(--ts-color-on-secondary, #fff);
  --tsds-button-border-hover: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-focus: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-variant-radius: var(--btn-radius);
  --tsds-button-hover-opacity: 1;
  --tsds-button-active-opacity: 0.8;
}

:is(a, button).btn-ghost,
.elementor .elementor-widget-button.btn-ghost,
.elementor .elementor-button.btn-ghost {
  --tsds-button-bg: var(--btn-ghost-bg, transparent);
  --tsds-button-color: var(--btn-ghost-color, var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))));
  --tsds-button-border: var(--btn-ghost-border, transparent);
  --tsds-button-bg-hover: var(--btn-ghost-bg-hover, transparent);
  --tsds-button-color-hover: var(--btn-ghost-color-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-border-hover: var(--btn-ghost-border-hover, transparent);
  --tsds-button-focus: var(--btn-ghost-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-ghost-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.82;
  --tsds-button-active-opacity: 0.7;
}

/* S is the implicit variant default. If classes collide, the explicit scale order wins. */
:is(a, button).btn-xxs,
.elementor .elementor-widget-button.btn-xxs,
.elementor .elementor-button.btn-xxs { --tsds-button-py: var(--btn-py-xxs); --tsds-button-px: var(--btn-px-xxs); --tsds-button-size-icon-gap: var(--btn-ig-xxs); }
:is(a, button).btn-xs,
.elementor .elementor-widget-button.btn-xs,
.elementor .elementor-button.btn-xs { --tsds-button-py: var(--btn-py-xs); --tsds-button-px: var(--btn-px-xs); --tsds-button-size-icon-gap: var(--btn-ig-xs); }
:is(a, button).btn-s,
.elementor .elementor-widget-button.btn-s,
.elementor .elementor-button.btn-s { --tsds-button-py: var(--btn-py-s); --tsds-button-px: var(--btn-px-s); --tsds-button-size-icon-gap: var(--btn-ig-s); }
:is(a, button).btn-m,
.elementor .elementor-widget-button.btn-m,
.elementor .elementor-button.btn-m { --tsds-button-py: var(--btn-py-m); --tsds-button-px: var(--btn-px-m); --tsds-button-size-icon-gap: var(--btn-ig-m); }
:is(a, button).btn-l,
.elementor .elementor-widget-button.btn-l,
.elementor .elementor-button.btn-l { --tsds-button-py: var(--btn-py-l); --tsds-button-px: var(--btn-px-l); --tsds-button-size-icon-gap: var(--btn-ig-l); }
:is(a, button).btn-xl,
.elementor .elementor-widget-button.btn-xl,
.elementor .elementor-button.btn-xl { --tsds-button-py: var(--btn-py-xl); --tsds-button-px: var(--btn-px-xl); --tsds-button-size-icon-gap: var(--btn-ig-xl); }
:is(a, button).btn-xxl,
.elementor .elementor-widget-button.btn-xxl,
.elementor .elementor-button.btn-xxl { --tsds-button-py: var(--btn-py-xxl); --tsds-button-px: var(--btn-px-xxl); --tsds-button-size-icon-gap: var(--btn-ig-xxl); }

:is(a, button):is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) {
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s)));
  padding-block: var(--tsds-button-py);
  padding-inline: var(--tsds-button-px);
}

.elementor .elementor-widget-button:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) > .elementor-button,
.elementor .elementor-button:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) {
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s))) !important;
  padding-block: var(--tsds-button-py) !important;
  padding-inline: var(--tsds-button-px) !important;
}

/* Elementor v4 places the public class directly on its Atomic button. */
.elementor .e-button-base:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) {
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s)));
  padding-block: var(--tsds-button-py);
  padding-inline: var(--tsds-button-px);
}

/* btn-block owns the Elementor widget width and every supported direct wrapper. */
:is(a, button).btn-block {
  display: flex;
  width: 100%;
  max-width: 100%;
}

.elementor .elementor-widget-button.btn-block {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor .elementor-widget-button.btn-block > .elementor-widget-container,
.elementor .elementor-widget-button.btn-block > .elementor-widget-container > .elementor-button-wrapper,
.elementor .elementor-widget-button.btn-block > .elementor-button-wrapper {
  width: 100% !important;
}

.elementor .elementor-widget-button.btn-block > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button.btn-block > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button.btn-block > .elementor-button,
.elementor .elementor-button.btn-block {
  display: flex !important;
  width: 100% !important;
}

:is(a, button).btn-pill,
.elementor .elementor-widget-button.btn-pill,
.elementor .elementor-button.btn-pill {
  --tsds-button-radius-override: 9999px;
}

:is(a, button).btn-pill {
  border-radius: var(--tsds-button-radius-override, 9999px);
}

.elementor .elementor-widget-button.btn-pill > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button.btn-pill > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button.btn-pill > .elementor-button,
.elementor .elementor-button.btn-pill {
  border-radius: var(--tsds-button-radius-override, 9999px) !important;
}

.elementor .e-button-base.btn-pill {
  border-radius: var(--tsds-button-radius-override, 9999px);
}

/*
 * Bridge inherited ig-* and size values through every supported immediate
 * Elementor wrapper. Directional icon margins must not add to the gap.
 */
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-button,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) {
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s))) !important;
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button > .elementor-button-content-wrapper,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button > .elementor-button-content-wrapper,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-button > .elementor-button-content-wrapper,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: var(--tsds-icon-gap, var(--tsds-button-size-icon-gap, var(--btn-ig-s))) !important;
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button > .elementor-button-content-wrapper > .elementor-button-icon,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button > .elementor-button-content-wrapper > .elementor-button-icon,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-button > .elementor-button-content-wrapper > .elementor-button-icon,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost, .btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl, .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) > .elementor-button-content-wrapper > .elementor-button-icon {
  margin-inline: 0 !important;
}

/* Interaction states apply only to complete TSDS variants. */
:is(a, button):is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):hover {
  background: var(--tsds-button-bg-hover);
  color: var(--tsds-button-color-hover);
  border-color: var(--tsds-button-border-hover);
  opacity: var(--tsds-button-hover-opacity);
  text-decoration: none;
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button:hover,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button:hover,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-button:hover,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):hover {
  background: var(--tsds-button-bg-hover) !important;
  color: var(--tsds-button-color-hover) !important;
  border-color: var(--tsds-button-border-hover) !important;
  opacity: var(--tsds-button-hover-opacity) !important;
}

:is(a, button):is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):active {
  opacity: var(--tsds-button-active-opacity);
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button:active,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button:active,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-button:active,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):active {
  opacity: var(--tsds-button-active-opacity) !important;
}

:is(a, button):is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):focus-visible {
  outline: 2px solid var(--tsds-button-focus);
  outline-offset: 3px;
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button:focus-visible,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button:focus-visible,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-button:focus-visible,
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):focus-visible {
  outline: 2px solid var(--tsds-button-focus) !important;
  outline-offset: 3px !important;
}

:is(a, button):is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):is(:disabled, [disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)[aria-disabled="true"] > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)[aria-disabled="true"] > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)[aria-disabled="true"] > .elementor-button,
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-widget-container > .elementor-button-wrapper > .elementor-button:is(:disabled, [disabled], [aria-disabled="true"]),
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > :is(.elementor-widget-container, .elementor-button-wrapper) > .elementor-button:is(:disabled, [disabled], [aria-disabled="true"]),
.elementor .elementor-widget-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-button:is(:disabled, [disabled], [aria-disabled="true"]),
.elementor .elementor-button:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):is(:disabled, [disabled], [aria-disabled="true"]) {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}