// @import (reference) "../../Shared/shared.less";
// @import (reference) "../RuleDetail.less";

.rulePreview {
    -ctag-tag: page;
    -ctag-example: "...{ .rulePreview_stage }{ .rulePreview_nav }";
    /* -ctag-description:
            This is a description that is long, so needs
            a commented version.
    */

    &:extend(
        .ruleDetail_contentContainer
        .ruleDetail_content
    );
    z-index: 300;

    /*@media ( max-width: @screen-lg-min ) {
        .calc( width , 100% , -120px );
    }*/

    .rulePreview_stage {
        -ctag-tags: page,rulePreview;
        -ctag-example: "...{ .rulePreview_iframe }";

        width: 100%;
        .calc( height , 100% , -40px );
        background-color: #fff;
        position: absolute;
        left: 0px; top: 0px;

        .rulePreview_iframe {
            -ctag-tags: page,rulePreview;
            -ctag-example: "<iframe style='border:none;' ...></iframe>";

            width: 100%; height: 100%;
            background-color: #eee;
        }
    }

    .rulePreview_nav {
        -ctag-tag: navigation;
        /* -ctag-example:
                ...{ .rulePreview_navLabel }
                    { .rulePreview_state }
                    { .rulePreview_stateApplied }
                    { .rulePreview_toggleBGColor }
                    { .rulePreview_outline }
        */

        position: absolute;
        width: 100%; height: 40px;
        background-color: #fff;
        border-top: 0px solid #eee;
        left: 0px; bottom: 0px;
        box-shadow: 0px -3px 3px 0px rgba( 0,0,0,.05);
        z-index: 1000;

        /*@media ( max-width: @screen-lg-min ) {
            width: 119px; left: -120px;
        }*/

        .rulePreview_navLabel {
            -ctag-tag: "label";
            -ctag-example: "...states";

            height: 40px;
            float: left;
            text-align: center;
            font-size: 12px;
            padding: 10px 10px;
        }

        .rulePreview_navItem {
            -ctag-tag: "button";
            -ctag-example: "...";

            width: 40px; height: 100%;
            margin-right: 1px;
            margin-top: 0px;
            float: right;
            text-align: center;
            font-size: 12px;
            padding-top: 10px;


            .handover();
            //&:hover {
            //    background-color: #eee;
            //}
        }

        .rulePreview_state {
            -ctag-tag: "button";
            -ctag-example: "...1";
            &:extend(
                .rulePreview
                .rulePreview_nav
                .rulePreview_navItem all
            );

            float: left;
            min-width: 40px;
            //max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            width: auto;
            padding-left: 8px;
            padding-right: 8px;

            &.selected {
                background-color: #777;
                color: #fff;
            }
        }

        .rulePreview_stateApplied {
            -ctag-tag: "label";
            -ctag-example: "....myAppliedState";

            padding: 10px;
            font-size: 12px;
            float: left;
        }

        .rulePreview_toggleBGColor {
            -ctag-tag: "button";
            -ctag-example: "...";
            &:extend(
                .rulePreview
                .rulePreview_nav
                .rulePreview_navItem all
            );

            margin-right: 10px;
            background-color: #fff;
            background-image: url("bg_color_icon.png");
            &:hover {
                background-image: url("bg_color_icon_dark.png");
            }

            &.selected {
                background-color: #777;
                background-image: url("bg_color_icon_dark.png");

                &:hover {
                    background-color: #aaa;
                }
            }
        }

        .rulePreview_outline {
            -ctag-tag: "button";
            -ctag-example: "...";

            &:extend(
                .rulePreview
                .rulePreview_nav
                .rulePreview_navItem all
            );
            background-image: url("outline_icon.png");
            &:hover {
                background-image: url("outline_icon_dark.png");
            }

            &.selected {
                background-color: #777;
                background-image: url("outline_icon_dark.png");

                &:hover {
                    background-color: #aaa;
                }
            }
        }

        .rulePreview_html {
            -ctag-tag: "button";
            -ctag-example: "...";
            &:extend(
                .rulePreview
                .rulePreview_nav
                .rulePreview_navItem all
            );

            background-color: #fff;
            background-image: url("html_icon.png");
            &:hover {
                background-image: url("html_icon_dark.png");
            }
        }
    }

}