.pretty-print() {
    color: @blackish;
    position: relative;
    white-space: pre;

    .null, .bool,
    .z, .b {
        color: #0086b3;
    }

    .num,
    .n {
        color: #40A070;
    }

    .quoted,
    .q {
        color: #D20;
        .string,
        .s {
            color: #D14;
            a:link, a:visited {
                color: #D14;
                text-decoration: underline;
            }
            a:hover, a:active {
                color: #0058E1;
            }
        }

    }

    .re {
        color: #009926;
    }

//    .fn {
//        color: #458;
//    }

    .ref {
        .ref-link() {
            cursor: pointer;
            border-bottom: 1px dotted #D14;
            &:hover {
                color: @linkColor;
                border-bottom: 1px solid @linkColor;
            }
        }
        .ref-ref, .ref-db, .ref-id {
            .v .s {
                .ref-link;
            }
        }
        .ref-id {
            .v.n {
                .ref-link;
                border-bottom-color: #40A070;
            }
        }
    }


    var {
        font-style: normal;
    }

    .p {
        position:    relative;

        .ellipsis,
        .e {
            display: none;
            cursor: pointer;
            .summary,
            q {
                color:  @greyish;
                font-style: italic;
            }
        }

        .collapser,
        .c,
        button {
            display: block;
            cursor:      pointer;
            position:    absolute;
            height:      16px;
            width:       16px;
            left:        -16px;
            top:         0;
            padding:     0;
            font-size:   0;
            line-height: 0;
            color:       transparent;
            overflow:    hidden;

            &:after {
                display:  block;
                position: absolute;
                left:     4px;
                top:      6px;
                height:   0;
                width:    0;
                content:  ' ';

                border:   4px solid transparent;
                border-top-color: lighten(@greyish, 20%);
            }
            &:hover:after, &:active:after {
                border-top-color: @greyish;
            }
        }
        button {
            border: none;
            background-color: transparent;
        }
        &.collapsed {
            button {
                &:after {
                    left: 6px;
                    top:  4px;

                    border-top-color: transparent;
                    border-left-color: lighten(@greyish, 20%);
                }
                &:hover:after, &:active:after {
                    border-top-color: transparent;
                    border-left-color: @greyish;
                }
            }
            .ellipsis,
            .e {
                display: inline;
            }
            .collapser,
            .c {
                &:after {
                    top:  4px;

                    border-top-color:  transparent;
                    border-left-color: lighten(@greyish, 20%);
                }
                &:hover, &:active {
                    &:after {
                        border-top-color:  transparent;
                        border-left-color: @greyish;
                    }
                }
            }

            > .v {
                height: 0px;
                width: 0px;
                overflow: hidden;
                display: inline-block;
                visibility: hidden;
                /*display: none;*/
            }
        }
    }
}

.document-wrapper {
    article {
        h3 {
            line-height: 1;
            margin-bottom: 10px;
        }
    }

    .document {
        .pretty-print;
    }
}

// Pretty print the "index details" popovers too
.index-details li {
    .pretty-print;
    white-space: normal;
}
