@prefix: graphjs;

@{prefix}-blog-list.@{prefix}-root {
    display: block;
    position: relative;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-content {
            &.@{prefix}-stuffed {
                min-height: 41em;
            }
            .@{prefix}-placeholder {
                padding: 2.5em;
            }
        }
    }
    &.@{prefix}-inline {
        .@{prefix}-header {
            border-color: transparent;
        }
        .@{prefix}-content {
            &.@{prefix}-stuffed {
                min-height: 36em;
            }
            .@{prefix}-placeholder {
                padding: 0;
            }
        }
    }
    .@{prefix}-content {
        &.@{prefix}-pagination {
            .@{prefix}-controls {
                position: relative;
                left: unset;
                right: unset;
                bottom: unset;
                height: auto;
                padding: 0;
                background-color: transparent;
            }
        }
        .@{prefix}-list {
            display: block;
            width: 100%;
            height: auto;
            vertical-align: middle;
            .@{prefix}-item {
                display: inline-block;
                width: 100%;
                height: auto;
                margin-bottom: 2em;
                font-size: 1.2em;
                // ThemeOption: color: @text-color-normal;
                cursor: pointer;
                &:first-child {
                    .@{prefix}-summary {
                        display: inline-block;
                    }
                }
                &:nth-child(2), &:nth-child(3) {
                    width: calc((100% - 1.5em) / 2);
                    .@{prefix}-summary {
                        display: inline-block;
                    }
                }
                &:nth-child(3) {
                    margin-left: 1.5em;
                }
                &.@{prefix}-hidden {
                    display: none !important;
                }
                &.@{prefix}-placeholder {
                    // ThemeOption: color: @text-color-weak;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                }
                .@{prefix}-title {
                    width: 100%;
                    height: auto;
                    margin-bottom: 0;
                    padding: 0;
                    // ThemeOption: .text-color-states(@primary-color);
                    font-size: 1.6em;
                    .bold-font;
                    line-height: 1.2em;
                    border: none;
                    border-radius: 0;
                    pointer-events: none; // Fixed missed link clicks
                    small {
                        margin-left: .25em;
                        b {
                            padding: .25em .5em;
                            color: white;
                            font-size: .35em;
                            text-transform: uppercase;
                            .border-radius(@border-radius-small);
                            // ThemeOption: background-color: @primary-color;
                        }
                    }
                }
                .@{prefix}-information {
                    width: 100%;
                    margin-top: .25em;
                    // ThemeOption: color: @text-color-weak;
                    font-size: .75em;
                    & > * {
                        display: inline;
                        float: none;
                        line-height: 1.2em;
                        &:first-child {
                            &::before {
                                display: none !important;
                            }
                        }
                        &::before {
                            content: "\B7";
                            display: inline;
                            // ThemeOption: color: @text-color-weak;
                        }
                    }
                    * {
                        color: inherit;
                    }
                    .@{prefix}-author {
                        span {
                            .heavy-font;
                            &::before {
                                content: attr(data-authorbeforetext);
                                display: inline;
                                margin-right: .25em;
                                .regular-font;
                            }
                        }
                    }
                    .@{prefix}-time {
                        time {
                            color: inherit;
                        }
                    }
                }
                .@{prefix}-summary {
                    display: none;
                    width: 100%;
                    margin-top: .5em;
                    // ThemeOption: color: @text-color-normal;
                    font-size: 1.1em;
                    line-height: 1.5em;
                    height: 4.5em;
                    overflow: hidden;
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        padding: 2.5em;
        background-color: transparent !important;
        .@{prefix}-items {
            display: block;
            width: 100%;
            height: auto;
            .@{prefix}-item {
                display: inline-block;
                width: 100%;
                margin-bottom: 1.5em;
                &:first-child {
                    font-size: 1.2em;
                }
                &:nth-child(2), &:nth-child(3) {
                    width: calc((100% - (1.5em * 1.1)) / 2);
                    .@{prefix}-title {
                        width: 100%;
                    }
                    .@{prefix}-information {
                        width: 80%;
                    }
                }
                &:nth-child(3) {
                    margin-left: calc(1.5em / 1.1);
                }
                .@{prefix}-title {
                    position: relative;
                    width: 75%;
                    margin-top: .2em;
                    padding: 0;
                    height: 1.6em;
                    .border-radius(calc(1.6em / 2));
                }
                .@{prefix}-information {
                    position: relative;
                    width: 45%;
                    height: .8em;
                    margin-top: .3em;
                    padding: 0;
                    vertical-align: bottom;
                    .border-radius(calc(.8em / 2));
                }
                .@{prefix}-summary {
                    display: block;
                    width: 100%;
                    height: 4.5em;
                    margin-top: 1.6em;
                    .@{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-list.@{prefix}-root {
        &.@{prefix}-box {
            .@{prefix}-content {
                &.@{prefix}-stuffed {
                    min-height: 38.5em;
                }
            }
        }
        &.@{prefix}-inline {
            .@{prefix}-content {
                &.@{prefix}-stuffed {
                    min-height: 33.5em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-list {
                .@{prefix}-item {
                    &:nth-child(2), &:nth-child(3) {
                        width: 100%;
                    }
                    &:nth-child(3) {
                        margin-left: 0;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-items {
                .@{prefix}-item {
                    &:nth-child(2), &:nth-child(3) {
                        width: 100%;
                        .@{prefix}-title {
                            width: 100%;
                        }
                        .@{prefix}-information {
                            width: 80%;
                        }
                    }
                    &:nth-child(3) {
                        margin-left: 0;
                    }
                    .@{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-list.@{prefix}-root {
        &.@{prefix}-box {
            .@{prefix}-content {
                &.@{prefix}-stuffed {
                    min-height: 38.5em;
                }
            }
        }
        &.@{prefix}-inline {
            .@{prefix}-content {
                &.@{prefix}-stuffed {
                    min-height: 33.5em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-list {
                .@{prefix}-item {
                    &:nth-child(2), &:nth-child(3) {
                        width: 100%;
                    }
                    &:nth-child(3) {
                        margin-left: 0;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-items {
                .@{prefix}-item {
                    &:nth-child(2), &:nth-child(3) {
                        width: 100%;
                        .@{prefix}-title {
                            width: 75%;
                        }
                        .@{prefix}-information {
                            width: 60%;
                        }
                    }
                    &:nth-child(3) {
                        margin-left: 0;
                    }
                    .@{prefix}-title {
                        width: 75%;
                    }
                    .@{prefix}-information {
                        width: 60%;
                    }
                }
            }
        }
    }
}