/* Media Type Icons - Universal SVG Styling */

/* Wrapper for all icons */
.media-icon .media-icons-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}

/* Individual icon items */
.media-icon .media-icon-item {
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

/* Base styling for SVG icons */
.media-icon .media-type-icon {
    width: 20px !important;
    height: 20px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Hover effects */
.media-icon .media-type-icon:hover {
    transform: scale(1.15) !important;
    filter: brightness(1.1) !important;
}

/* Specific hover effects for each icon type */
.media-icon .video-icon:hover circle {
    fill: #c0392b !important;
}

.media-icon .image-icon:hover rect:first-child {
    fill: #2980b9 !important;
}

.media-icon .audio-icon:hover circle {
    fill: #8e44ad !important;
}

.media-icon .gallery-icon:hover rect:first-child {
    fill: #229954 !important;
}

/* Ensure proper alignment in processed media-icon widgets */
.media-icon[data-media-icons-processed="true"] {
    display: block !important;
}

/* Fallback for older browsers */
.media-icon .media-type-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .media-icon .media-type-icon {
        font-size: 16px !important;
    }
}

/* Alternative: Custom SVG approach (uncomment if you want to use custom SVGs) */
/*
.media-type-icon.custom-svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.media-type-icon.video-svg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>');
}

.media-type-icon.image-svg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>');
}
*/