//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    // counter-reset property declared for the numbered blocks
    body {
        counter-reset: number-heading;
    }
    // figures
    figure {
        display: inline-block;
    }
    figcaption {
        font-weight: 700;
        text-align: center;
    }
    // SVG Helper Classes
    .fill-blue {
        fill: @djo-blue;
    }
    .fill-blue-dark {
        fill: @djo-blue-dark;
    }
    .fill-gray {
        fill: @djo-gray;
    }
    .fill-gray-light {
        fill: @djo-gray-light;
    }
    .fill-orange {
        fill: @djo-orange;
    }
    .fill-white {
        fill: #fff;
    }
    // responsive iframe videos
    .video-wrapper {
        height: 0;
        padding-bottom: 56.25%;
        position: relative;
        iframe {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
    }
    // tables
    table.bordered {
        .lib-table-bordered();
    }
    table.striped {
        .lib-table-striped();
    }
    table.hover {
        .lib-table-hover();
    }
    ul > li,
    ol > li {
        margin-bottom: 0;
    }

    .lazyload,
    .lazyloading {
        opacity: 0
    }

    .lazyloaded {
        opacity: 1;
        transition: opacity .2s linear
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // use .contained to keep its child elements within the max-width of the site
    .contained {
        &:extend(.page-main);
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    // use .contained to keep its child elements within the max-width of the site
    .contained {
        &:extend(.page-main);
    }
    // reset blank theme styles for H1 elements on large viewports
    // public\vendor\magento\theme-frontend-blank\web\css\source
    h1 {
        font-size: @h1__font-size;
        margin-bottom: @heading__margin-bottom__base;
    }
}