/* ==========================================================================
   Shared Visual Infrastructure (Applies to both Editor & Live Front-end Website)
   ========================================================================== */
[class*="csi-editor-slug-"] .wp-block-button__link,
[class*="csi-render-slug-"] .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px; /* Layout spacer spacing adjustment value gap */
}

/* Base style layout properties for the icon vector container pseudo-element */
[class*="csi-editor-slug-"] .wp-block-button__link::before,
[class*="csi-render-slug-"] .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================================
   FLEXBOX POSITIONING ALIGNMENT ENGINES
   ========================================================================== */

/* Left Side (Before the text content strings) */
.csi-pos-left .wp-block-button__link::before {
    order: -1; 
}

/* Right Side (After the text content strings) */
.csi-pos-right .wp-block-button__link::before {
    order: 1; 
}