/* ========================
   Blynex Hover Effects
   ======================== */

/**
 * 1. Base Styles for Both Blocks
 * Applies to both Cover and Image blocks
 */
 .wp-block-cover.blynex-hover-enabled,
 .wp-block-image.blynex-hover-enabled {
   transition: all var(--blynex-hover-duration, 0.3s) ease !important;
   backface-visibility: hidden;
   transform-style: preserve-3d;

   /**
    * 2. Hover State Styles
    * Only applied on frontend (editor has different handling)
    */
   &:hover {
     /* Zoom Effect */
     &.blynex-hover-zoom {
       transform: scale(var(--blynex-hover-scale, 1.05)) !important;
       z-index: 1; /* Prevents clipping during scale */
     }

     /* Fade Effect */
     &.blynex-hover-fade {
       opacity: var(--blynex-hover-opacity, 0.8) !important;
     }

     /* Grayscale Effect */
     &.blynex-hover-grayscale {
       filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
     }

     /* Blur Effect */
     &.blynex-hover-blur {
       filter: blur(var(--blynex-hover-blur, 2px)) !important;
     }

     /* Glow Effect */
     &.blynex-hover-glow {
       box-shadow: 0 0 var(--blynex-hover-glow-spread, 15px) var(--blynex-hover-glow-color, rgba(255, 255, 255, 0.7)) !important;
     }
   }
 }

 /**
  * 3. Image Block Specific Styles
  * Needed because images are nested differently
  */
 .wp-block-image.blynex-hover-enabled {
  //  display: inline-block; /* Required for proper transform */

   img {
     transition: inherit !important; /* Inherit from parent */
     backface-visibility: inherit;

     /* Hover states for nested image */
     .blynex-hover-zoom &:hover {
       transform: scale(var(--blynex-hover-scale, 1.05)) !important;
     }
     .blynex-hover-grayscale &:hover {
       filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
     }
     .blynex-hover-blur &:hover {
       filter: blur(var(--blynex-hover-blur, 2px)) !important;
     }
   }
 }

 /**
  * 4. Editor-Specific Styles
  * Shows effects constantly while editing
  */
//  .editor-styles-wrapper {
//    .blynex-hover-enabled {
//      /* Zoom Effect */
//      &.blynex-hover-zoom {
//        transform: scale(var(--blynex-hover-scale, 1.05)) !important;
//      }

//      /* Fade Effect */
//      &.blynex-hover-fade {
//        opacity: var(--blynex-hover-opacity, 0.8) !important;
//      }

//      /* Grayscale Effect */
//      &.blynex-hover-grayscale {
//        filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
//      }

//      /* Blur Effect */
//      &.blynex-hover-blur {
//        filter: blur(var(--blynex-hover-blur, 2px)) !important;
//      }

//      /* Glow Effect */
//      &.blynex-hover-glow {
//        box-shadow: 0 0 var(--blynex-hover-glow-spread, 15px) var(--blynex-hover-glow-color, rgba(255, 255, 255, 0.7)) !important;
//      }
//    }

//    /* Image block editor styles */
//    .wp-block-image.blynex-hover-enabled {
//      img {
//        .blynex-hover-zoom & {
//          transform: scale(var(--blynex-hover-scale, 1.05)) !important;
//        }
//        .blynex-hover-grayscale & {
//          filter: grayscale(var(--blynex-hover-grayscale, 80%)) !important;
//        }
//        .blynex-hover-blur & {
//          filter: blur(var(--blynex-hover-blur, 2px)) !important;
//        }
//      }
//    }
//  }

 /**
  * 5. Panel Styling
  * Styles for the settings panel in editor
  */
 .blynex-hover-panel {
   /* Panel header with icon */
   > .components-panel__body-title {
     display: flex;
     align-items: center;
     gap: 8px;

     .components-panel__icon {
       margin-right: 0;
       color: #1e1e1e; /* Match WordPress panel icon color */
     }
   }

   /* Custom hover icon */
   .blynex-hover-icon {
     margin-right: 8px;
     width: 20px;
     height: 20px;
   }
 }

 /**
  * 6. Dark Mode Support
  * Adjusts for WordPress dark mode
  */
 .is-dark-theme {
   .blynex-hover-panel {
     > .components-panel__body-title .components-panel__icon {
       color: #f0f0f1; /* Light color for dark mode */
     }
   }
 }