/* Base icon styles - NO hardcoded icons, all dynamic from PHP */
.wp-block-button.has-icon .wp-block-button__link {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.wp-block-button.has-icon .wp-block-button__link::before,
.wp-block-button.has-icon .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}

/* Position controls - FIXED */
.wp-block-button.has-icon-position__left .wp-block-button__link {
    flex-direction: row;
}

.wp-block-button.has-icon-position__left .wp-block-button__link::after {
    display: none;
}

.wp-block-button.has-icon-position__left .wp-block-button__link::before {
    display: inline-block;
}

.wp-block-button.has-icon-position__right .wp-block-button__link {
    flex-direction: row;
}

.wp-block-button.has-icon-position__right .wp-block-button__link::before {
    display: none;
}

.wp-block-button.has-icon-position__right .wp-block-button__link::after {
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-button.has-icon .wp-block-button__link {
        gap: 0.3em;
    }
    
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        width: 0.9em;
        height: 0.9em;
    }
}

/* Custom button styling support with high specificity for color override */
.wp-block-button.has-icon .wp-block-button__link {
    transition: all 0.2s ease;
}

/* 
 * All icon-specific styles are generated dynamically by PHP
 * based on the selected icon from icons.json and custom styling options
 * No hardcoded icon styles here!
 * 
 * Dynamic styles will have higher specificity like:
 * .wp-block-button.has-button-id-123.has-icon .wp-block-button__link::before
 */