/**
 * Habillage CTA compte [sp_auth_cta] — tokens --sp-color-*.
 * Handle: sp-auth-cta-skin
 */

.sp-auth-cta.sp-auth-cta--button {
  --sp-cta-accent: var(--sp-color-btn-bg, var(--sp-color-accent));
  color: var(--sp-color-btn-fg, var(--sp-color-contrast)) !important;
  -webkit-text-fill-color: var(--sp-color-btn-fg, var(--sp-color-contrast)) !important;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.375rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.25 !important;
  border-radius: var(--sp-ma-radius-control, var(--wp--preset--border-radius--md, 0.5rem)) !important;
}

.sp-auth-cta.sp-auth-cta--button.sp-auth-login--tone-secondary {
  --sp-cta-accent: var(--sp-color-contrast);
  color: var(--sp-color-base) !important;
  -webkit-text-fill-color: var(--sp-color-base) !important;
}

:is(.is-style-section-contrast, .is-style-section-primary)
  .sp-auth-cta.sp-auth-cta--link {
  --sp-cta-accent: var(--sp-color-base);
  font-weight: 700;
}

:is(.is-style-section-contrast, .is-style-section-primary)
  .sp-auth-cta.sp-auth-cta--button:not(.sp-auth-login--tone-secondary) {
  --sp-cta-accent: var(--sp-color-base);
  color: var(--sp-color-contrast) !important;
  -webkit-text-fill-color: var(--sp-color-contrast) !important;
}

:is(.is-style-section-contrast, .is-style-section-primary)
  .sp-auth-cta.sp-auth-cta--button.sp-auth-login--tone-secondary {
  --sp-cta-accent: transparent;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--voile-trait, currentColor);
  color: var(--sp-color-base) !important;
  -webkit-text-fill-color: var(--sp-color-base) !important;
}