@prefix: graphjs;

@{prefix}-forum-list.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
      .@{prefix}-content {
          .@{prefix}-placeholder {
              padding: 2.5em;
          }
      }
    }
    &.@{prefix}-inline {
        .@{prefix}-content {
            .@{prefix}-placeholder {
                padding: 0;
            }
        }
    }
    .@{prefix}-header {
        border-color: transparent;
    }
    .@{prefix}-content {
        min-height: 25em;
        .no-padding !important;
        .@{prefix}-bar {
            display: table;
            width: 100%;
            height: auto;
            & > * {
                float: left;
                border-radius: 0;
            }
            .@{prefix}-search {
                width: calc(100% - 12em - 2px); // 2px creates the space for pseudo-border
                margin-right: 2px; // Simulating a 2px border
                // ThemeOption: background-color: desaturate(tint(@primary-color, 20%), 5%);
                & > * {
                    float: left;
                    border-radius: 0;
                }
                .@{prefix}-icon {
                    width: 3.5em;
                    height: 3.5em;
                    svg {
                        position: relative;
                        width: 1.3em;
                        height: 1.3em;
                        margin: 1.1em;
                        vertical-align: middle;
                        path {
                            fill: white;
                            .transition(fill .35s ease);
                        }
                    }
                }
                input, input[type] {
                    width: calc(100% - 3.5em);
                    height: 3.5em;
                    .no-padding;
                    color: white;
                    line-height: 3.5em;
                    border: none;
                    background-color: transparent;
                    .placeholder-color(fade(white, 75%));
                }
            }
            button {
                width: 12em;
                height: 3.5em;
                padding-left: 0;
                padding-right: 0;
                .regular-font;
                font-size: 1em;
                text-transform: none;
                // ThemeOption: .background-color-states(@primary-color);
                svg {
                    position: relative;
                    width: auto;
                    height: 1.2em;
                    margin-right: .2em;
                    vertical-align: middle;
                    path {
                        fill: white;
                        .transition(fill .35s ease);
                    }
                }
                span {
                    color: white;
                }
            }
        }
        .@{prefix}-list {
            display: inline-block;
            width: 100%;
            height: auto;
            vertical-align: middle;
            .@{prefix}-item {
                display: inline-block;
                width: 100%;
                // ThemeOption: color: @text-color-normal;
                line-height: 3.5em;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: fade(black, 10%);
                &:last-child {
                    border-bottom: none;
                }
                &:hover {
                    background-color: fade(black, 2.5%);
                }
                &.@{prefix}-hidden {
                    display: none !important;
                }
                &.@{prefix}-placeholder {
                    // ThemeOption: color: @text-color-weak;
                    text-align: center;
                }
                & > * {
                    float: left;
                    &:first-child {
                        border-left: none;
                    }
                }
                .@{prefix}-title {
                    width: calc(100% - 16em);
                    padding: 0 1.5em;
                    // ThemeOption: color: @text-color-strong;
                    .single-line-text;
                }
                /*
                .@{prefix}-views {
                    width: 10%;
                    font-size: .9em;
                    svg {
                        width: auto;
                        height: .75em;
                        margin-right: .25em;
                        path {
                            // ThemeOption: fill: @text-color-normal;
                        }
                    }
                }
                */
                time {
                    width: calc(4em / .9);
                    // ThemeOption: color: @text-color-normal;
                    font-size: .9em;
                }
                .@{prefix}-contributors {
                    width: 10.5em;
                    height: 3.5em;
                    padding: .75em 0;
                    img {
                        width: 2em;
                        height: 2em;
                        margin-right: .1em;
                        border-width: 0;
                        border-style: solid;
                        // ThemeOption: border-color: @background-color-contrast;
                        border-color: transparent; // ThemeFix
                        .border-radius(@border-radius-full);
                    }
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        padding: 0 !important;
        .@{prefix}-bar {
            display: block;
            width: 100%;
            height: 3.5em;
        }
        .@{prefix}-list {
            display: block;
            width: 100%;
            height: auto;
            .@{prefix}-item {
                display: block;
                width: 100%;
                height: calc(3.5em + 1px);
                padding: .75em 0;
                .@{prefix}-title {
                    display: block;
                    width: calc(80% - 17.5em);
                    height: .9em;
                    margin: .55em 0;
                    margin-left: 1.5em;
                    margin-right: 20%;
                    .no-padding;
                    .border-radius(calc(.9em / 2));
                }
                .@{prefix}-time {
                    display: block;
                    width: 2.5em;
                    height: .8em;
                    max-width: 30em;
                    margin: .6em 0;
                    margin-right: 1.5em;
                    .border-radius(calc(.8em / 2));
                }
                .@{prefix}-contributors {
                    width: 10.5em;
                    height: 2em;
                    .no-padding;
                    .clearfix;
                    .@{prefix}-avatar {
                        display: block;
                        float: left;
                        width: 2em;
                        height: 2em;
                        margin-right: .1em;
                    }
                }
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-forum-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-bar {
                .@{prefix}-search {
                    width: calc(100% - 3.5em - 2px); // 2px creates the space for pseudo-border
                }
                button {
                    width: 3.5em;
                    span {
                        display: none;
                    }
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    .@{prefix}-title {
                        width: calc(100% - 11.5em);
                        padding: 0 1em;
                    }
                    .@{prefix}-contributors {
                        width: 6.5em;
                        img {
                            margin-right: -.9em;
                            border-width: 2px;
                            box-shadow: 0 0 2px fade(black, 65%);
                        }
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-list {
                .@{prefix}-item {
                    height: calc(3.5em + 1px);
                    .@{prefix}-title {
                        width: calc(80% - 12.5em);
                        margin-left: 1em;
                        margin-right: 20%;
                    }
                    .@{prefix}-time {
                        width: 2.5em;
                        margin-right: 1.5em;
                    }
                    .@{prefix}-contributors {
                        .@{prefix}-avatar {
                            margin-right: -.9em;
                        }
                    }
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-forum-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-bar {
                .@{prefix}-search {
                    width: calc(100% - 10em - 2px); // 2px creates the space for pseudo-border
                }
                button {
                    width: 10em;
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    .@{prefix}-title {
                        width: calc(100% - 14em);
                        padding: 0 1.5em;
                    }
                    .@{prefix}-contributors {
                        width: 8.5em;
                        img {
                            margin-right: -.4em;
                            border-width: 2px;
                        }
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-list {
                .@{prefix}-item {
                    height: calc(3.5em + 1px);
                    .@{prefix}-title {
                        width: calc(80% - 15.5em);
                        margin-left: 1.5em;
                        margin-right: 20%;
                    }
                    .@{prefix}-time {
                        width: 2.5em;
                        margin-right: 1.5em;
                    }
                    .@{prefix}-contributors {
                        .@{prefix}-avatar {
                            margin-right: -.4em;
                        }
                    }
                }
            }
        }
    }
}