@prefix: graphjs;

@{prefix}-blog.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
        // If it is wrapped with boxed Blog component
        .@{prefix}-inline {
            .@{prefix}-header {
                border-color: fade(black, 7.5%);
            }
            .@{prefix}-content {
                &.@{prefix}-stuffed {
                    min-height: 41em;
                }
                .@{prefix}-comments {
                    margin: -2.5em;
                    margin-top: 2.5em;
                    padding: 0 2.5em;
                    // ThemeOption: background-color: @background-color-contrast;
                }
                .@{prefix}-placeholder {
                    padding: 2.5em;
                }
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-blog.@{prefix}-root {
        &.@{prefix}-box {
            // If it is wrapped with boxed Blog component
            .@{prefix}-inline {
                .@{prefix}-content {
                    &.@{prefix}-stuffed {
                        min-height: 38.5em;
                    }
                    .@{prefix}-comments {
                        margin: -1.5em;
                        margin-top: 1.5em;
                        padding: 0 1.5em;
                    }
                    .@{prefix}-placeholder {
                        padding: 1.5em;
                    }
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-blog.@{prefix}-root {
        &.@{prefix}-box {
            // If it is wrapped with boxed Blog component
            .@{prefix}-inline {
                .@{prefix}-content {
                    min-height: 38.5em;
                    .@{prefix}-comments {
                        margin: -2em;
                        margin-top: 2em;
                        padding: 0 2em;
                    }
                    .@{prefix}-placeholder {
                        padding: 2em;
                    }
                }
            }
        }
    }
}