@prefix: graphjs;

@{prefix}-messages-composer.@{prefix}-root {
    display: block;
    width: 100%;
    max-width: 29em;
    &.@{prefix}-box {
        .@{prefix}-content {
            form {
                // ThemeOption: background-color: @background-color-contrast;
            }
        }
    }
    &.@{prefix}-inline {
        .@{prefix}-content {
            input, input[type], .@{prefix}-recipient {
                border-bottom-width: 1px;
                border-bottom-style: dotted;
                border-bottom-color: fade(black, 10%);
            }
        }
    }
    .@{prefix}-content {
        .no-padding !important;
        .@{prefix}-recipient {
            padding: .75em 1em;
            // ThemeOption: color: @text-color-strong;
            &.@{prefix}-unknown {
                &::before {
                    display: none;
                }
            }
            &::before {
                content: attr(data-recipientlabel);
                margin-right: .25em;
                // ThemeOption: color: @text-color-normal;
            }
        }
        input, input[type] {
            padding: .75em 1em;
            // ThemeOption: color: @text-color-strong;
            border: none;
            background-color: transparent;
        }
        form {
            width: 100%;
            padding: 1em;
            .clearfix;
            textarea {
                width: 100%;
                height: 10em;
                margin: 0 auto;
                margin-bottom: 0;
                .no-padding;
                vertical-align: middle;
                border: none;
                background-color: transparent;
            }
            button {
                float: right;
                width: auto;
                margin-top: .5em;
                margin-left: .5em;
                font-size: .9em;
            }
        }
    }
}