/* Button Icon Frontend Styles - Pure CSS for instant loading */

/* Instant button layout with icons */
.wp-block-button__link[data-icon] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Icon after text (default) */
.wp-block-button__link[data-icon]:not([data-icon-position="before"])::after {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icon before text */
.wp-block-button__link[data-icon][data-icon-position="before"]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Legacy support for JS-added icons */
.wp-block-button__link .button-icon {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Icon position */
.wp-block-button__link.icon-before {
    flex-direction: row;
}

.wp-block-button__link.icon-after {
    flex-direction: row;
}

/* Display modes */

/* Icon only mode - hide text, show only icon */
.wp-block-button__link[data-display-mode="icon-only"] {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    font-size: 0 !important; /* Hide text */
    line-height: 0 !important; /* Remove line height spacing */
    text-indent: -9999px !important; /* Push text out of view */
    overflow: hidden !important; /* Hide overflow text */
    gap: 0 !important; /* Remove gap between elements */
    aspect-ratio: 1 / 1;
}

.wp-block-button__link[data-display-mode="icon-only"]::before,
.wp-block-button__link[data-display-mode="icon-only"]::after {
    font-size: 24px !important; /* Icon larger in icon-only mode */
    text-indent: 0 !important; /* Reset indent for icon */
    line-height: 1 !important; /* Reset line height for icon */
}

/* Text only mode - hide icons */
.wp-block-button__link[data-display-mode="text-only"]::before,
.wp-block-button__link[data-display-mode="text-only"]::after {
    display: none !important;
}

/* Legacy JS-added icons support */
.wp-block-button__link.display-icon-only {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    aspect-ratio: 1 / 1;
}

.wp-block-button__link.display-icon-only .button-icon {
    font-size: 24px;
}

.wp-block-button__link.display-text-only .button-icon {
    display: none;
}