// Styling related to displaying markdown in question properties
@import "lib/main";

.itext-block-container {
    // These are functional styles that control when to display help icons for markdown
    // The !important markers, while terrible, are to overcome more specific but genuinely stylistic styles

    &.has-markdown {
        .markdown-group {
            display: block !important;
        }
        .turn-markdown-off,
        .markdown-output:not(:empty),
        .fd-help {
            display: inline-block !important;
        }
        .turn-markdown-on {
            display: none !important;
        }
    }

    &:not(.has-markdown) {
        .markdown-group,
        .turn-markdown-off,
        .markdown-output {
            display: none !important;
        }
        .turn-markdown-on,
        .fd-help {
            display: inline-block !important;
        }
    }

    &.markdown-ignorant {
        .turn-markdown-off,
        .turn-markdown-on, 
        .markdown-output,
        .fd-help {
            display: none !important;
        }
    }
}

.markdown-output {
    width: 100%;
    margin: 0;
    
    // styling to make markdown table look similar to that on mobile
    table {
        padding: 0;
        tr {
            border-top: 1px solid #cccccc;
            background-color: white;
            margin: 0;
            padding: 0;
            th {
                font-weight: bold;
                border: 1px solid #cccccc;
                text-align: left;
                margin: 0;
                padding: 6px 13px;
                &:first-child {
                    margin-top: 0;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
            td {
                border: 1px solid #cccccc;
                text-align: left;
                margin: 0;
                padding: 6px 13px;
                &:first-child {
                    margin-top: 0;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
            &:nth-child(2n) {
                background-color: #f8f8f8;
            }
        }
    }
}
