/* Arrow Button Widget */
.cbp-arrow-btn {
    --arrow-btn-easing: ease-in-out;
    
    display: inline-flex;
    width: fit-content;
    background-color: transparent;
    border: 1.5px solid currentColor;
    border-radius: 0.8rem;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.cbp-arrow-btn__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Transition removed - utilizing GSAP JS animation */
}

.cbp-arrow-btn__wrapper--primary {
    transform: translate(0, 0);
}

.cbp-arrow-btn__wrapper--secondary {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbp-arrow-btn__icon {
    width: 4rem;
    display: block;
}

/* ===== DIAGONAL (default) ===== */
.cbp-arrow-btn[data-direction="diagonal"] .cbp-arrow-btn__icon,
.cbp-arrow-btn:not([data-direction]) .cbp-arrow-btn__icon {
    transform: rotate(0deg);
}

.cbp-arrow-btn[data-direction="diagonal"] .cbp-arrow-btn__wrapper--secondary,
.cbp-arrow-btn:not([data-direction]) .cbp-arrow-btn__wrapper--secondary {
    transform: translate(-100%, 100%);
}

/* ===== RIGHT ===== */
.cbp-arrow-btn[data-direction="right"] .cbp-arrow-btn__icon {
    transform: rotate(45deg);
}

.cbp-arrow-btn[data-direction="right"] .cbp-arrow-btn__wrapper--secondary {
    transform: translate(-100%, 0);
}

/* ===== LEFT ===== */
.cbp-arrow-btn[data-direction="left"] .cbp-arrow-btn__icon {
    transform: rotate(-135deg);
}

.cbp-arrow-btn[data-direction="left"] .cbp-arrow-btn__wrapper--secondary {
    transform: translate(100%, 0);
}