// Styles for question properties content displayed in right column
@import "lib/main";

// Vellum wrapper
.formdesigner .fd-ui-container {

    // Question type changer and delete button
    .fd-props-toolbar {
        margin-bottom: 5px;
        border-bottom: 1px solid @navbarBackground;
        padding: @contentPaddingVellum;

        .fd-question-comment {
            margin-top: 10px;
            white-space: pre-line;
        }
    }

    // Main content (scrolling area, accordion of Basic, Logic, etc.)
    .fd-props-content {
        padding: 0 @contentPaddingVellum;

        // Help icons
        .fd-help {
            width: 25px;
            font-size: @baseFontSize * 1.5;

            a:hover {
                text-decoration: none;
                color: @green;
            }
        }

        // Copy-paste help (displayed in right-hand panel when multiple questions are selected in tree)
        .fd-copy-paste-help {
            .row {
                padding: 0 2em;
                margin-bottom: 2em;
            }

            .copy-paste-box textarea {
                width: 100%;
                height: 100px;
            }
        }

        // Single accordion section (Basic, Logic, etc.)
        .fd-question-fieldset {
            position: relative;
            min-width: 0px; /* for chrome */
            display: table-column; /* for firefox */

            // Always show main/basic section, but hide header
            &:first-child {
                margin-top: 20px;
                legend {
                    display: none;
                }
            }

            // Header
            legend {
                min-height: 30px;   // tall enough for help icon

                // Position section-level help at right of header
                .fd-help {
                   right: 0;
                   top: 0;
                }
            }

            // Accordion content
            .fd-fieldset-content {

                // Label for single input
                .control-label {

                    // Align help icon with top of input, and display inline with label
                    .fd-help {
                        position: relative;
                        top: -8px;
                        height: 15px;   // artifically small height to account for negative top
                        display: inline-block;
                    }

                    // Pull text label up so it aligns with help icon
                    label {
                        vertical-align: top;
                    }
                }

                .messages .alert {
                    margin: 10px 0 0 0;
                }

                // Blocks of itext, like when adding multimedia or advanced > other content
                .itext-block-container {
                    .btn-danger {
                        margin: 10px;
                    }
                }
            }

            // "auto?" checkbox for custom itext IDs
            .fd-itextID-checkbox-container {
                width: 55px;
                padding: 0 5px;
                background-color: lighten(@green, 50);
                .border-radius(5px);
            }

            // Key-value section, as used in android intent questions
            .fd-kv {
                margin-bottom: 0;

                .fd-kv-arrow {
                    text-align: center;
                    i {
                        margin-top: 8px;
                    }
                }
            }
        }
    }
} 
