@prefix: graphjs;

@{prefix}-forum-composer.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-inline {
        .@{prefix}-header {
            border-color: transparent;
        }
    }
    .@{prefix}-content {
        form {
            .clearfix;
            input, input[type] {
                width: 60%;
            }
            textarea {
                min-height: 21.5em;
                line-height: 1.25em;
            }
            button {
                width: 20%;
                float: right;
                margin-left: .5em;
                font-size: .95em;
            }
            span {
                float: left;
                max-width: 55%;
                line-height: 1.5em;
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-forum-composer.@{prefix}-root {
        .@{prefix}-content {
            form {
                input, input[type] {
                    width: 100%;
                }
                textarea {
                    min-height: 16.5em;
                }
                button {
                    width: auto;
                }
                span {
                    display: none;
                    /*
                    display: inline-block;
                    width: 100%;
                    max-width: 100%;
                    margin-bottom: 1em;
                    */
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-forum-composer.@{prefix}-root {
        .@{prefix}-content {
            form {
                input, input[type] {
                    width: 80%;
                }
                textarea {
                    min-height: 19em;
                }
                button {
                    width: auto;
                }
                span {
                    display: none;
                    /*
                    display: inline-block;
                    width: 100%;
                    max-width: 100%;
                    margin-bottom: 1em;
                    */
                }
            }
        }
    }
}