@prefix: graphjs;

@{prefix}-blog-post.@{prefix}-root {
    display: block;
    position: relative;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-content {
            &.@{prefix}-stuffed {
                min-height: 33em;
            }
            .@{prefix}-comments {
                margin: -2.5em;
                margin-top: 2.5em;
                padding: 0 2.5em;
                // ThemeOption: background-color: @background-color-contrast;
            }
            .@{prefix}-placeholder {
                padding: 2.5em;
            }
        }
    }
    &.@{prefix}-inline {
        .@{prefix}-header {
            border-color: transparent;
        }
        .@{prefix}-content {
            &.@{prefix}-stuffed {
                min-height: 28em;
            }
            .@{prefix}-comments {
                .box-shadow(none);
            }
            .@{prefix}-placeholder {
                padding: 0;
            }
        }
    }
    &.@{prefix}-composer {
        .@{prefix}-content {
            .@{prefix}-comments {
                .@{prefix}-comment {
                    height: auto;
                    form {
                        display: inline-block;
                    }
                }
            }
        }
    }
    .@{prefix}-content {
        position: relative;
        vertical-align: middle;
        .@{prefix}-nonexistent {
            p {
                text-align: center;
            }
        }
        .@{prefix}-post {
            overflow-y: auto;
            position: relative;
            /*.transition(margin-bottom .35s ease);*/
            .@{prefix}-action {
                text-align: right;
                li {
                    display: inline-block;
                    margin-left: .5em;
                    list-style: none;
                    a {
                        // ThemeOption: .text-color-states(@text-color-normal);
                        .bold-font;
                        font-variant: all-small-caps;
                        .transition(all .15s ease);
                        &.@{prefix}-danger {
                            .text-color-states(@danger-color) !important;
                        }
                        &.@{prefix}-success {
                            .text-color-states(@success-color) !important;
                        }
                        &[disabled] {
                            pointer-events: none;
                            cursor: not-allowed;
                        }
                    }
                }
            }
            .@{prefix}-title {
                width: 100%;
                margin-bottom: 0;
                padding: 0;
                // ThemeOption: color: @primary-color;
                font-size: 2em;
                .bold-font;
                line-height: 1.5em;
                text-align: left;
                border: none;
                border-radius: 0;
                .@{prefix}-back {
                    width: 1em;
                    height: 1em;
                    margin-top: .25em;
                    display: inline-block;
                    padding: .15em .3em .15em 0;
                    // ThemeOption: .icon-color-states(@text-color-weak);
                }
            }
            .@{prefix}-information {
                // ThemeOption: color: @text-color-weak;
                font-size: .9em;
                margin-top: .5em;
                & > * {
                    display: inline;
                    float: none;
                    line-height: 1em;
                    &:first-child {
                        &::before {
                            display: none !important;
                        }
                    }
                    &::before {
                        content: "\B7";
                        display: inline;
                        // ThemeOption: color: @text-color-weak;
                    }
                    & > a {
                        // ThemeOption: color: @text-color-normal;
                        .bold-font;
                        &::before {
                            // ThemeOption: color: @text-color-weak;
                            .regular-font;
                        }
                    }
                }
                * {
                    color: inherit;
                }
                .@{prefix}-author {
                    a {
                        .bold-font;
                        &::before {
                            content: attr(data-authorbeforetext);
                            display: inline;
                            margin-right: .25em;
                            .regular-font;
                        }
                    }
                }
                .@{prefix}-time {
                    time {
                        color: inherit;
                        .bold-font;
                        &::before {
                            content: attr(data-publishedtimebeforetext);
                            margin-right: .25em;
                            .regular-font;
                        }
                        &.@{prefix}-edited {
                            &::before {
                                content: attr(data-edittimebeforetext);
                            }
                        }
                        a {
                            color: inherit;
                            font-size: inherit;
                            font-weight: inherit;
                        }
                    }
                }
            }
            .@{prefix}-body {
                margin-top: 1.25em;
            }
        }
        .@{prefix}-comments {
            margin-top: 2.5em;
            border-top-width: 2px;
            border-top-style: solid;
            // ThemeOption: border-top-color: @primary-color;
            .box-shadow(0 -2px 1px 0px fade(black, 7.5%));
            .@{prefix}-comment {
                overflow: hidden;
                display: inline-block;
                width: 100%;
                height: calc(3em - 2px);
                padding: 0;
                .@{prefix}-synopsis {
                    display: inline-block;
                    position: relative;
                    width: 100%;
                    padding: calc(1em - 1px) 0;
                    border-bottom-width: 1px;
                    border-bottom-style: dotted;
                    border-bottom-color: fade(black, 15%);
                    cursor: pointer;
                    & > b {
                        // ThemeOption: color: @text-color-normal;
                    }
                    & > a {
                        display: inline-block;
                        height: 1em;
                        &:first-child {
                            &::before {
                                display: none;
                            }
                        }
                        &:last-child {
                            &::before {
                                display: none;
                            }
                        }
                        &.@{prefix}-icon {
                            float: right;
                            position: relative;
                            top: .1em;
                            &.@{prefix}-reverse {
                                top: -.1em;
                                .transform(scaleY(-1));
                            }
                            svg {
                                width: auto;
                                height: .8em;
                                padding: .1em 0;
                                path {
                                    // ThemeOption: fill: @primary-color;
                                }
                            }
                        }
                        &::before {
                            content: '\00b7';
                            display: inline;
                            margin: 0 .25em;
                        }
                    }
                }
                form {
                    display: none;
                    width: 100%;
                    margin-bottom: 1.5em;
                    textarea {
                        width: 100%;
                        height: 9em;
                        margin-top: 1em;
                        .no-padding;
                        line-height: 150%;
                        border: none;
                        background-color: transparent;
                        &.@{prefix}-closed {
                            height: 0;
                            border: none;
                        }
                    }
                    button {
                        float: right;
                        width: auto;
                        margin-top: .5em;
                        margin-left: .5em;
                        font-size: .9em;
                    }
                }
            }
            .@{prefix}-item {
                padding: 1em 0;
                border-top-width: 1px;
                border-top-style: dotted;
                border-top-color: fade(black, 15%);
                &:first-child {
                    border-top: none !important;
                }
                .@{prefix}-credit {
                    .credit-metrics(3em);
                    margin-bottom: .25em;
                    img {
                        cursor: pointer;
                    }
                    span {
                        // ThemeOption: color: @text-color-normal;
                        b {
                            cursor: pointer;
                        }
                    }
                }
                p {
                    margin-left: 3em * 1.2;
                    // ThemeOption: color: @text-color-normal;
                    .regular-font;
                    font-size: 1em;
                    line-height: 150%;
                    white-space: pre-wrap;
                    &.@{prefix}-editable {
                        padding: .75em 1em;
                        // ThemeOption: color: @text-color-normal;
                        border-width: 1px;
                        border-style: dashed;
                        // ThemeOption: border-color: fade(@default-color, 15%);
                        border-color: transparent; // ThemeFix
                        // ThemeOption: background-color: @background-color-contrast;
                        outline: none;
                    }
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        padding: 2.5em;
        background-color: transparent !important;
        .@{prefix}-title {
            position: relative;
            width: 50%;
            margin-top: .75em;
            padding: 0;
            height: 1.6em;
            .border-radius(calc(1.6em / 2));
        }
        .@{prefix}-information {
            position: relative;
            width: 30%;
            height: .8em;
            margin-top: 1em;
            padding: 0;
            .border-radius(calc(.8em / 2));
        }
        .@{prefix}-text {
            display: block;
            width: 100%;
            height: 6em;
            margin-top: 2.1em;
            margin-bottom: 1em;
            .@{prefix}-line {
                height: .85em;
                margin-bottom: .65em;
                .border-radius(calc(.85em / 2));
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-blog-post.@{prefix}-root {
        &.@{prefix}-box {
            .@{prefix}-content {
                .@{prefix}-comments {
                    margin: -1.5em;
                    margin-top: 1.5em;
                    padding: 0 1.5em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-post {
                .@{prefix}-title {
                    font-size: 1.55em;
                }
            }
            .@{prefix}-comments {
                margin-top: 1.5em;
                .@{prefix}-comment {
                    form {
                        margin-bottom: 1em;
                        textarea {
                            height: 6em;
                        }
                    }
                }
                .@{prefix}-item {
                    padding: 1em 0;
                    .@{prefix}-credit {
                        margin-bottom: .75em;
                    }
                    p {
                        margin-left: 0;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-title {
                width: 100%;
            }
            .@{prefix}-information {
                width: 80%;
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-blog-post.@{prefix}-root {
        &.@{prefix}-box {
            .@{prefix}-content {
                .@{prefix}-comments {
                    margin: -2em;
                    margin-top: 2em;
                    padding: 0 2em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-post {
                .@{prefix}-title {
                    font-size: 1.65em;
                }
            }
            .@{prefix}-comments {
                margin-top: 2em;
                .@{prefix}-comment {
                    form {
                        margin-bottom: 1.25em;
                        textarea {
                            height: 7.5em;
                        }
                    }
                }
                .@{prefix}-item {
                    padding: 1.25em 0;
                    .@{prefix}-credit {
                        margin-bottom: .5em;
                    }
                    p {
                        margin-left: 0;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-title {
                width: 75%;
            }
            .@{prefix}-information {
                width: 60%;
            }
        }
    }
}