////
///
/// Media Tags Module
/// ===========================================================================
///
/// Base styles for HTML media elements including images, video, audio,
/// iframe, and other embedded content.
///
/// @group Tags.Media
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../dev" as *;
@use "../mixins" as *;

// ============================================================================
// Tags
// ============================================================================

/// Resets border styling on images to remove borders when inside an `<a>`
/// element.
img {
    // Reset
    // Remove border when inside `a` element in IE 8/9/10
    border-style: none;
}

/// Basic video element styling.
///
/// Ensures responsiveness and adds a subtle border and shadow for distinction.
video {
    max-width: 100%; // Ensure responsiveness
    height: auto; // Maintain aspect ratio
    border: q(1) solid #ddd; // Add a light border for distinction
    box-shadow: 0 q(2) q(4) rgba(0, 0, 0, 0.1); // Add a subtle shadow for depth

    // Customizing the video controls
    &:hover::controls {
        background: rgba(0, 0, 0, 0.75);
        color: var(--surface_primary);
    }
}

/// Global styles for iFrame elements.
/// Removes the default border styling from iFrames for a cleaner look.
iframe {
    border-style: none;
}