/* Frontend styles for the icon block */
.wp-block-meyne-icon-blocks-icon-selector {
    margin: 16px 0;
}

.wp-block-meyne-icon-blocks-icon-selector.icon-block-left {
    text-align: left;
}

.wp-block-meyne-icon-blocks-icon-selector.icon-block-center {
    text-align: center;
}

.wp-block-meyne-icon-blocks-icon-selector.icon-block-right {
    text-align: right;
}

.wp-block-meyne-icon-blocks-icon-selector img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    /* Add a subtle shadow for better visual presentation */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
    /* Smooth transition for any size changes */
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-meyne-icon-blocks-icon-selector img {
        /* Ensure icons don't get too large on mobile */
        max-width: 60px;
        width: auto;
        height: auto;
    }
}

/* Print styles */
@media print {
    .wp-block-meyne-icon-blocks-icon-selector img {
        filter: none;
        box-shadow: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wp-block-meyne-icon-blocks-icon-selector img {
        filter: contrast(1.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wp-block-meyne-icon-blocks-icon-selector img {
        transition: none;
    }
}