/* Frontend-only styles for Simple Button Icons Dynamic */

/* Base icon styles for frontend */
.wp-block-button.has-icon .wp-block-button__link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
}

.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;
    transition: transform 0.2s ease;
}

/* Position controls */
.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__left .wp-block-button__link {
    flex-direction: row;
}

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

/* ====================================
   HOVER EFFECTS AND ANIMATIONS
   ==================================== */

/* General hover effects for frontend */
.wp-block-button.has-icon .wp-block-button__link:hover::before,
.wp-block-button.has-icon .wp-block-button__link:hover::after {
    transform: scale(1.1);
}

/* Focus states for accessibility */
.wp-block-button.has-icon .wp-block-button__link:focus::before,
.wp-block-button.has-icon .wp-block-button__link:focus::after {
    transform: scale(1.05);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Animation for arrow icons on hover */
.wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::before,
.wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::after {
    transform: translateX(3px);
}

.wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::before,
.wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::after {
    transform: translateX(-3px);
}

/* Animation for chevron icons on hover */
.wp-block-button.has-icon__chevron-right .wp-block-button__link:hover::before,
.wp-block-button.has-icon__chevron-right .wp-block-button__link:hover::after {
    transform: translateX(2px);
}

.wp-block-button.has-icon__chevron-left .wp-block-button__link:hover::before,
.wp-block-button.has-icon__chevron-left .wp-block-button__link:hover::after {
    transform: translateX(-2px);
}

/* Special animations for download/upload */
.wp-block-button.has-icon__download .wp-block-button__link:hover::before,
.wp-block-button.has-icon__download .wp-block-button__link:hover::after {
    transform: translateY(2px) scale(1.1);
}

.wp-block-button.has-icon__upload .wp-block-button__link:hover::before,
.wp-block-button.has-icon__upload .wp-block-button__link:hover::after {
    transform: translateY(-2px) scale(1.1);
}

/* Heart animation */
.wp-block-button.has-icon__heart .wp-block-button__link:hover::before,
.wp-block-button.has-icon__heart .wp-block-button__link:hover::after {
    animation: heartbeat 0.8s ease-in-out;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1.2); }
    75% { transform: scale(1.1); }
}

/* Star rotation animation */
.wp-block-button.has-icon__star .wp-block-button__link:hover::before,
.wp-block-button.has-icon__star .wp-block-button__link:hover::after {
    transform: rotate(72deg) scale(1.1);
    transition: transform 0.3s ease;
}

/* Shopping cart bounce */
.wp-block-button.has-icon__shopping-cart .wp-block-button__link:hover::before,
.wp-block-button.has-icon__shopping-cart .wp-block-button__link:hover::after {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* External link animation */
.wp-block-button.has-icon__external-link .wp-block-button__link:hover::before,
.wp-block-button.has-icon__external-link .wp-block-button__link:hover::after {
    transform: translate(2px, -2px) scale(1.1);
}

/* Plus icon rotation */
.wp-block-button.has-icon__plus .wp-block-button__link:hover::before,
.wp-block-button.has-icon__plus .wp-block-button__link:hover::after {
    transform: rotate(90deg) scale(1.1);
}

/* Check icon scale animation */
.wp-block-button.has-icon__check .wp-block-button__link:hover::before,
.wp-block-button.has-icon__check .wp-block-button__link:hover::after {
    animation: checkPulse 0.5s ease;
}

@keyframes checkPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.1); }
}

/* Phone wiggle animation */
.wp-block-button.has-icon__phone .wp-block-button__link:hover::before,
.wp-block-button.has-icon__phone .wp-block-button__link:hover::after {
    animation: phoneWiggle 0.5s ease;
}

@keyframes phoneWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Mail envelope animation */
.wp-block-button.has-icon__mail .wp-block-button__link:hover::before,
.wp-block-button.has-icon__mail .wp-block-button__link:hover::after {
    animation: mailFloat 0.6s ease;
}

@keyframes mailFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ====================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   ==================================== */

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

.rtl .wp-block-button.has-icon-position__left .wp-block-button__link {
    flex-direction: row-reverse;
}

/* Reverse animations for RTL */
.rtl .wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::before,
.rtl .wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::after {
    transform: translateX(-3px);
}

.rtl .wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::before,
.rtl .wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::after {
    transform: translateX(3px);
}

.rtl .wp-block-button.has-icon__chevron-right .wp-block-button__link:hover::before,
.rtl .wp-block-button.has-icon__chevron-right .wp-block-button__link:hover::after {
    transform: translateX(-2px);
}

.rtl .wp-block-button.has-icon__chevron-left .wp-block-button__link:hover::before,
.rtl .wp-block-button.has-icon__chevron-left .wp-block-button__link:hover::after {
    transform: translateX(2px);
}

/* ====================================
   ACCESSIBILITY FEATURES
   ==================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        filter: contrast(2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        transition: none;
        animation: none !important;
    }
    
    .wp-block-button.has-icon .wp-block-button__link:hover::before,
    .wp-block-button.has-icon .wp-block-button__link:hover::after {
        transform: none !important;
        animation: none !important;
    }
}

/* Focus visible for keyboard navigation */
.wp-block-button.has-icon .wp-block-button__link:focus-visible::before,
.wp-block-button.has-icon .wp-block-button__link:focus-visible::after {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

@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;
    }
    
    /* Reduce animation intensity on mobile */
    .wp-block-button.has-icon .wp-block-button__link:hover::before,
    .wp-block-button.has-icon .wp-block-button__link:hover::after {
        transform: scale(1.05);
    }
    
    .wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::before,
    .wp-block-button.has-icon__arrow-right .wp-block-button__link:hover::after {
        transform: translateX(2px);
    }
    
    .wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::before,
    .wp-block-button.has-icon__arrow-left .wp-block-button__link:hover::after {
        transform: translateX(-2px);
    }
}

@media (max-width: 480px) {
    .wp-block-button.has-icon .wp-block-button__link {
        gap: 0.25em;
    }
    
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        width: 0.8em;
        height: 0.8em;
    }
}


/* Baca variabel --sbi-icon-color */
/* target pseudo-elt di editor block list */
.block-editor-block-list__block.wp-block-button.has-icon
  .block-editor-rich-text__editable.wp-block-button__link::before,
.block-editor-block-list__block.wp-block-button.has-icon
  .block-editor-rich-text__editable.wp-block-button__link::after {
  mask-image: var(--sbi-icon-mask) !important;
  -webkit-mask-image: var(--sbi-icon-mask) !important;
  background-color: var(--sbi-icon-color, currentColor) !important;
}
/* ==========================================
   ALIGNMENT FIX FOR FRONTEND ICON BUTTON TEXT
   ========================================== */

/* Align text & icon inside button based on has-text-align-* class */
.wp-block-button.has-icon .wp-block-button__link.has-text-align-left {
    justify-content: flex-start;
    text-align: left;
}

.wp-block-button.has-icon .wp-block-button__link.has-text-align-right {
    justify-content: flex-end;
    text-align: right;
}

.wp-block-button.has-icon .wp-block-button__link.has-text-align-center {
    justify-content: center;
    text-align: center;
}

/* Fallback if no has-text-align-* class */
.wp-block-button.has-icon .wp-block-button__link {
    justify-content: inherit;
    text-align: inherit;
}

/* Prevent text content inside link from overflowing/flexing weirdly */
.wp-block-button.has-icon .wp-block-button__link {
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 0;
}

/* Ensure icon mask from --sbi-icon-mask is respected */
.wp-block-button.has-icon .wp-block-button__link::before,
.wp-block-button.has-icon .wp-block-button__link::after {
    mask-image: var(--sbi-icon-mask);
    -webkit-mask-image: var(--sbi-icon-mask);
    background-color: var(--sbi-icon-color, currentColor);
}



/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        display: none;
    }
    
    .wp-block-button.has-icon .wp-block-button__link {
        gap: 0;
    }
}

/* ====================================
   DARK MODE THEME SUPPORT
   ==================================== */

@media (prefers-color-scheme: dark) {
    .wp-block-button.has-icon .wp-block-button__link::before,
    .wp-block-button.has-icon .wp-block-button__link::after {
        filter: brightness(1.1);
    }
}

/* ====================================
   PERFORMANCE OPTIMIZATIONS
   ==================================== */

/* Use GPU acceleration for smoother animations */
.wp-block-button.has-icon .wp-block-button__link::before,
.wp-block-button.has-icon .wp-block-button__link::after {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
    .wp-block-button.has-icon .wp-block-button__link:hover::before,
    .wp-block-button.has-icon .wp-block-button__link:hover::after {
        transform: none;
        animation: none;
    }
    
    .wp-block-button.has-icon .wp-block-button__link:active::before,
    .wp-block-button.has-icon .wp-block-button__link:active::after {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}