@import './var.scss';

:root {
    --typography-padding: #{$typography-padding};
    --typography-border-color: #{$typography-border-color};
    --typography-h-margin-bottom: #{$typography-h-margin-bottom};
    --typography-p-line-height: #{$typography-p-line-height};
    --typography-p-margin-bottom: #{$typography-p-margin-bottom};
    --typography-font-size-xs: #{$typography-font-size-xs};
    --typography-font-size-sm: #{$typography-font-size-sm};
    --typography-font-size-md: #{$typography-font-size-md};
    --typography-font-size-lg: #{$typography-font-size-lg};
    --typography-font-size-xl: #{$typography-font-size-xl};
    --typography-font-size-xxl: #{$typography-font-size-xxl};
    --typography-table-bg: #{$typography-table-bg};
    --typography-table-tr-bg: #{$typography-table-tr-bg};
    --typography-table-td-border-color: #{$typography-table-td-border-color};
    --typography-li-margin-left: #{$typography-li-margin-left};
    --typography-hr-bg: #{$typography-hr-bg};
}

.jing-typography {
    padding: var(--typography-padding);
    word-break: break-all;
    word-wrap: break-word;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: bold;
        margin-bottom: var(--typography-h-margin-bottom);
    }
    h1 {
        font-size: var(--typography-font-size-xxl);
    }
    h2 {
        font-size: var(--typography-font-size-xl);
    }
    h3 {
        font-size: var(--typography-font-size-lg);
    }
    h4 {
        font-size: var(--typography-font-size-md);
    }
    h5 {
        font-size: var(--typography-font-size-sm);
    }
    h6 {
        font-size: var(--typography-font-size-xs);
    }
    p {
        line-height: var(--typography-p-line-height);
        margin-bottom: var(--typography-p-margin-bottom);
    }
    table p {
        margin-bottom: 0;
    }
    table {
        width: 100% !important;
        border-spacing: 0;
        border-collapse: collapse;
        border: 1px solid var(--typography-border-color);
        background: var(--typography-table-bg);
        margin-bottom: 0;
        tr:nth-child(odd) {
            background-color: var(--typography-table-tr-bg);
        }
        tbody {
            td {
                font-size: var(--typography-font-size-xs);
                padding: 3px 6px;
                border: 1px solid var(--typography-table-td-border-color);
            }
        }
    }
    li {
        margin-left: var(--typography-li-margin-left);
    }
    li > p {
        margin-bottom: 0;
    }
    hr {
        height: 1px;
        margin: 0.75rem 0;
        border: 0;
        background-color: var(--typography-hr-bg);
    }
    // .am-btn.am-sm {
    //     display: inline-block;
    //     line-height: 1.2rem;
    //     margin-left: 0 !important;
    //     margin-top: 0.25rem;
    //     padding: 0 0.5rem;
    //     float: none;
    // }
    // .am-btn.am-color-blue {
    //     border-color: $blue;
    //     background-color: $blue;
    //     background-repeat: repeat-y;
    //     background-size: 100% auto;
    //     color: $white-1 !important;
    // }
    // .am-btn.am-sm {
    //     margin-left: 3%;
    //     font-size: var(--typography-font-size-xs);
    //     border-radius: $border-radius;
    // }
    // .am-btn.am-sm {
    //     height: 1.25rem;
    // }
}

// .jing-typography {
//     &.popup {
//         p {
//             line-height: 1.4em;
//             margin-bottom: 0;
//         }
//     }
// }