// RIVER Design-System: Preload - Styles / Visuals //

// Define our visual styles here, such as images and icons.
// These are often used for WYSIWYG content and the like (as well as letterhead templates for example).
// We use these to apply default HTML elements styling via the '.scope-styles' scope defined in 'helpers/styles-scope'.

@if(design-setting('helpers') and design-setting('helpers.styles-visuals', false)) {
    /* RIVER Design-System: Helpers - Styles / Formats */

    // Image <img>
    .style-image {
        display: block;
        max-width: 100%;
    }
    :where(.style-image) {
        // Low specificity
        width: auto;
        height: auto;
    }
    .style-image--fullwidth {
        width: 100%;
        height: auto;
    }
    .style-image--cover, .style-image--contain {
        position: absolute;
        inset: 0;
    }
    .style-image--cover {
        object-fit: cover;
    }
    .style-image--contain {
        object-fit: contain;
    }

    // Icon <i>
    .style-icon {
        display: inline-block;
        max-width: 100%;
    }
    .style-icon > svg {
        display: block;
        height: 100%;
        width: auto;
    }
    :where(.style-icon) {
        // Low specificity
        width: auto;
        height: auto;
    }
    .style-icon--small {
        height: 0.8em;
    }
    .style-icon--normal {
        height: 1.0em;
    }
    .style-icon--large {
        height: 1.2em;
    }

    // Video, Splash (parent element)
    .style-video,
    .style-splash {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 57%;
        > iframe, > img, > video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
    }

    // Loading
    .style-loading {
        opacity: 0.5;
        pointer-events: none;
    }

}