/* =============================================================================
   Widget: CTA Button
   BEM root: .gtea-cta
   ============================================================================= */

/* ── Base container ─────────────────────────────────────────────────────────── */

.gtea-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

/* ── Label ──────────────────────────────────────────────────────────────────── */

.gtea-cta__label {
    /* typography and color driven by Elementor style controls */
}

/* ── Icon SVG default size (matches control defaults: 16px × 16px) ─────────── */

.gtea-cta__icon-wrap svg {
    width: 16px;
    height: 16px;
}

/* ── Icon wrapper ───────────────────────────────────────────────────────────── */

.gtea-cta__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* overflow is NOT set here — padding/border on the wrap must not affect the
       clip boundary. When animation is active, clipping is done by __icon-clip. */
}

/* ── Icon clip (animation only) ─────────────────────────────────────────────── */
/*
 * Inner container rendered only when an animation type is active.
 * It auto-sizes to the icon content (no padding here), which is what
 * makes translateX(110%) always sufficient to clear the clip edge regardless
 * of how much padding or border the outer __icon-wrap carries.
 */

.gtea-cta__icon-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0; /* overflow:hidden makes min-width:0 in flex; prevent compression */
}

/* ── Icon (base: primary and clone) ────────────────────────────────────────── */

.gtea-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Clone icon: fills __icon-clip, initially out-of-view to the left */
.gtea-cta__icon--clone {
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
}

/* ── Animation: slide ───────────────────────────────────────────────────────── */
/*
 * The --anim-slide modifier is placed on each __icon-wrap independently.
 * This allows activating the animation per icon (left, right, or both).
 * Duration is driven by the CSS variable --gtea-icon-anim-duration (set via
 * Elementor's inline style on the wrap element); defaults to 300ms.
 *
 * overflow: hidden is on __icon-clip (not __icon-wrap) so that padding and
 * border on the wrap do not widen the clip region.
 *
 * Future animation types: add new .gtea-cta__icon-wrap--anim-{type} blocks.
 */

.gtea-cta__icon-wrap--anim-slide .gtea-cta__icon-clip {
    overflow: hidden;
}

.gtea-cta__icon-wrap--anim-slide .gtea-cta__icon:not(.gtea-cta__icon--clone) {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.gtea-cta__icon-wrap--anim-slide .gtea-cta__icon--clone {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover trigger — only wraps that have --on-hover */
.gtea-cta:hover .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-hover .gtea-cta__icon:not(.gtea-cta__icon--clone) {
    transform: translateX(110%);
}

.gtea-cta:hover .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-hover .gtea-cta__icon--clone {
    transform: translateX(0);
}

/* Focus trigger — only wraps that have --on-focus */
.gtea-cta:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon:not(.gtea-cta__icon--clone) {
    transform: translateX(110%);
}

.gtea-cta:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon--clone {
    transform: translateX(0);
}

/* =============================================================================
   Future animation stubs (examples for extension):
   .gtea-cta__icon-wrap--anim-fade   { ... }
   .gtea-cta__icon-wrap--anim-spin   { ... }
   .gtea-cta__icon-wrap--anim-bounce { ... }
   ============================================================================= */