@prefix: graphjs;

@{prefix}-forum-thread.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
      .@{prefix}-content {
          .@{prefix}-reply {
              // ThemeOption: background-color: @background-color-contrast;
          }
      }
    }
    &.@{prefix}-composer {
        .@{prefix}-content {
            .@{prefix}-thread {
                max-height: 32em;
                margin-bottom: 18em;
            }
            .@{prefix}-reply {
                bottom: 0;
            }
        }
    }
    .@{prefix}-content {
        overflow: hidden !important;
        position: relative;
        min-height: 37em;
        .no-padding !important;
        vertical-align: middle;
        .@{prefix}-thread {
            overflow-y: auto;
            position: relative;
            max-height: 47em;
            margin-bottom: 3em;
            /*.transition(margin-bottom .35s ease);*/
            .@{prefix}-title {
                display: none;
                position: relative;
                z-index: 2;
                padding: 1.5em 2.5em 0;
                line-height: 100%;
                h1 {
                    .no-margin;
                    // ThemeOption: color: @text-color-strong;
                    .regular-font;
                    font-size: 1.75em;
                    line-height: 150%;
                }
            }
            .@{prefix}-replies {
                padding-right: 2.5em;
                padding-left: 2.5em;
                .@{prefix}-item {
                    padding: 1.5em 0;
                    border-top-width: 1px;
                    border-top-style: dotted;
                    border-top-color: fade(black, 15%);
                    &:first-child {
                        border-top: none !important;
                    }
                    /*
                    &:first-child {
                        line-height: 150%;
                        border-top: none !important;
                        .credit {
                            margin-bottom: 1.5em;
                        }
                        p {
                            margin-left: 0;
                            font-size: 1.05em;
                            & + p {
                                margin-top: 1em;
                            }
                        }
                    }
                    */
                    .@{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;
                        }
                    }
                }
            }
        }
        .@{prefix}-reply {
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: -15em;
            left: 0;
            width: 100%;
            height: 18em;
            padding: 1.5em 2.5em;
            padding-top: 0;
            border-top-width: 2px;
            border-top-style: solid;
            // ThemeOption: border-top-color: @primary-color;
            .box-shadow(0 -2px 1px 0px fade(black, 7.5%));
            /*.transition(bottom .35s ease);*/
            .@{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 {
                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;
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        padding: 0 2.5em;
        .@{prefix}-title {
            display: none !important;
            position: relative;
            width: calc(50% - 2.5em);
            margin-top: 2.5em;
            padding: 0;
            height: 1.5em;
            .border-radius(calc(1.5em / 2));
        }
        .@{prefix}-creator {
            display: block;
            height: 3em;
            margin-top: 1.5em;
            .clearfix;
            & > * {
                float: left;
            }
            .@{prefix}-avatar {
                display: block;
                width: 3em;
                height: 3em;
            }
            .@{prefix}-information {
                display: block;
                width: calc(35% - 2.5em);
                height: 3em;
                padding: .5em;
                .@{prefix}-line {
                    height: .8em;
                    .border-radius(calc(.8em / 2));
                    &:first-child {
                        width: 80%;
                        margin-bottom: .4em;
                    }
                }
            }
        }
        .@{prefix}-text {
            display: block;
            width: 100%;
            height: 6em;
            margin-top: .75em;
            margin-bottom: 1em;
            padding-left: calc(3em * 1.2);
            .@{prefix}-line {
                height: .85em;
                margin-bottom: .65em;
                .border-radius(calc(.85em / 2));
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-forum-thread.@{prefix}-root {
        &.@{prefix}-composer {
            .@{prefix}-content {
                .@{prefix}-thread {
                    margin-bottom: 15em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-thread {
                .@{prefix}-title {
                    display: block;
                    padding: 1em 1.5em 0;
                    h1 {
                        font-size: 1.55em;
                    }
                }
                .@{prefix}-replies {
                    padding-right: 1.5em;
                    padding-left: 1.5em;
                    .@{prefix}-item {
                        padding: 1em 0;
                        .@{prefix}-credit {
                            margin-bottom: .75em;
                        }
                        p {
                            margin-left: 0;
                        }
                    }
                }
            }
            .@{prefix}-reply {
                bottom: -12em;
                height: 15em;
                padding: 1em 1.5em;
                padding-top: 0;
                form {
                    textarea {
                        height: 6em;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            padding: 0 1.5em;
            .@{prefix}-title {
                display: block;
                width: calc(90% - 2.5em);
                margin-top: 1.25em;
            }
            .@{prefix}-text {
                padding-left: 0;
            }
            .@{prefix}-creator {
                .@{prefix}-information {
                    width: calc(45% - 2.5em);
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-forum-thread.@{prefix}-root {
        &.@{prefix}-composer {
            .@{prefix}-content {
                .@{prefix}-thread {
                    margin-bottom: 16.5em;
                }
            }
        }
        .@{prefix}-content {
            .@{prefix}-thread {
                .@{prefix}-title {
                    display: block;
                    padding: 1.25em 2em 0;
                    h1 {
                        font-size: 1.65em;
                    }
                }
                .@{prefix}-replies {
                    padding-right: 2em;
                    padding-left: 2em;
                    .@{prefix}-item {
                        padding: 1.25em 0;
                        .@{prefix}-credit {
                            margin-bottom: .5em;
                        }
                        p {
                            margin-left: 0;
                        }
                    }
                }
            }
            .@{prefix}-reply {
                bottom: -13.5em;
                height: 16.5em;
                padding: 1.25em 2em;
                padding-top: 0;
                form {
                    textarea {
                        height: 7.5em;
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            padding: 0 2em;
            .@{prefix}-title {
                display: block;
                width: calc(70% - 2.5em);
                margin-top: 2em
            }
            .@{prefix}-text {
                padding-left: 0;
            }
            .@{prefix}-creator {
                .@{prefix}-information {
                    width: calc(40% - 2.5em);
                }
            }
        }
    }
}