body[data-view="svg_images"]
{
    .presentation-svgs
    {
        margin-bottom: steps(4);

        .css.example
        {
            &:after
            {
                display: inline-block;
                content: svg-image-data-url("checkmark");
            }
        }

        .color.example
        {
            &:before
            {
                display: inline-block;
                content: svg-image-data-url("checkmark", $fill: $color-dummy-11);
            }

            &:hover:before
            {
                content: svg-image-data-url("checkmark", $fill: $color-dummy-15);
            }

            &:hover
            {
                // IE10 needs something to happen to the hovered element itself,
                // otherwise it does not change the :before pseudo-element's state
                position: relative;
            }
        }
    }
}
