// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

.markdown {
    color: var(--app-text-color);
    font-family: var(--markdown-font);
    font-size: 14px;
    overflow-wrap: break-word;
    margin-bottom: 10px;

    .title {
        color: var(--app-text-color);
        margin-top: 16px;
        margin-bottom: 8px;
    }

    strong {
        color: var(--app-text-color);
    }

    a {
        color: #32afff;
    }

    table {
        tr th {
            color: var(--app-text-color);
        }
    }

    ul {
        list-style-type: disc;
        list-style-position: outside;
        margin-left: 16px;
    }

    ol {
        list-style-position: outside;
        margin-left: 19px;
    }

    blockquote {
        margin: 4px 10px 4px 10px;
        border-radius: 3px;
        background-color: var(--panel-bg-color);
        padding: 2px 4px 2px 6px;
    }

    pre.codeblock {
        background-color: var(--panel-bg-color);
        margin: 4px 10px;
        padding: 0.4em 0.7em;
        border-radius: 4px;
        position: relative;

        code {
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: auto;
            overflow: hidden;
        }

        .codeblock-actions {
            visibility: hidden;
            display: flex;
            position: absolute;
            top: 4px;
            right: 4px;
            border-radius: 4px;
            align-items: center;
            justify-content: flex-end;
            padding-left: 4px;
            padding-right: 4px;

            i {
                color: var(--line-actions-inactive-color);
                margin-left: 4px;

                &:first-child {
                    margin-left: 0px;
                }

                &:hover {
                    color: var(--line-actions-active-color);
                }

                &.fa-check {
                    color: var(--success-color);
                }

                &.fa-square-terminal {
                    cursor: pointer;
                }
            }
        }

        &:hover .codeblock-actions {
            visibility: visible;
        }
    }

    code {
        color: var(--app-text-color);
        background-color: var(--panel-bg-color);
        font-family: var(--termfontfamily);
        border-radius: 4px;
    }

    pre.selected {
        outline: 2px solid var(--accent-color);
    }

    .title {
        font-weight: semibold;
        padding-top: 6px;
    }

    .title.is-1 {
        border-bottom: 1px solid #777;
        padding-bottom: 6px;
        font-size: 2em;
    }
    .title.is-2 {
        border-bottom: 1px solid #777;
        padding-bottom: 6px;
        font-size: 1.5em;
    }
    .title.is-3 {
        font-size: 1.25em;
    }
    .title.is-4 {
        font-size: 1em;
    }
    .title.is-5 {
        font-size: 0.875em;
    }
    .title.is-6 {
        font-size: 0.85em;
    }
}

.markdown.content {
    line-height: 1.5;
}

.markdown > *:first-child {
    margin-top: 0 !important;
}