// RIVER Design-System: Helpers - Display / General //

// General display helpers.
// These support with common display styling.

@if(design-setting('helpers') and design-setting('helpers.display-general', false)) {
    /* RIVER Design-System: Helpers - Display / General */

    .display-fullscreen {
        width: 100%;
        min-height: 100vh;
    }

    .display-fullsize {
        width: 100%;
        height: 100%;
    }

    .display-cover {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        // Note, certain elements such as iframe may ignore inset,
        // and also need the width / height manually defined.
    }

    .display-bg-cover {
        // Should likely be used with display-cover
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .display-fit {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .display-contain {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

}