Equicord/src/equicordplugins/markdownTables/styles.css

.vc-markdownTables-root {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    margin: 0.25rem 0;
}

.vc-markdownTables-toolbar {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px;
    border: 1px solid var(--background-modifier-accent);
    border-radius: 4px;
    background: var(--background-secondary);
}

.vc-markdownTables-toggle {
    min-width: 44px;
    padding: 2px 8px;
    border: 0;
    border-radius: 3px;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.25rem;
    background: transparent;
    cursor: pointer;
}

.vc-markdownTables-toggle:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.vc-markdownTables-toggle-active,
.vc-markdownTables-toggle-active:hover {
    color: var(--interactive-active);
    background: var(--background-modifier-selected);
}

.vc-markdownTables-raw {
    max-width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--background-modifier-accent);
    border-radius: 4px;
    overflow-x: auto;
    color: inherit;
    background: var(--background-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
    white-space: pre;
}

.vc-markdownTables-scrollFrame {
    --vc-markdown-tables-mask-size: 42px;
    --vc-markdown-tables-fade-color: var(--background-primary);
    --vc-markdown-tables-fade-mid: color-mix(in srgb, var(--vc-markdown-tables-fade-color) 74%, transparent);
    --vc-markdown-tables-fade-soft: color-mix(in srgb, var(--vc-markdown-tables-fade-color) 36%, transparent);

    position: relative;
    max-width: 100%;
    border: 1px solid var(--background-modifier-accent);
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
}

.vc-markdownTables-scrollFrame::before,
.vc-markdownTables-scrollFrame::after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--vc-markdown-tables-mask-size);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 180ms ease,
        width 180ms ease;
}

.vc-markdownTables-scrollFrame::before {
    left: 0;
    background: linear-gradient(to right,
            var(--vc-markdown-tables-fade-color) 0,
            var(--vc-markdown-tables-fade-mid) 42%,
            var(--vc-markdown-tables-fade-soft) 70%,
            transparent 100%);
}

.vc-markdownTables-scrollFrame::after {
    right: 0;
    background: linear-gradient(to left,
            var(--vc-markdown-tables-fade-color) 0,
            var(--vc-markdown-tables-fade-mid) 42%,
            var(--vc-markdown-tables-fade-soft) 70%,
            transparent 100%);
}

.vc-markdownTables-mask-left::before,
.vc-markdownTables-mask-right::after {
    opacity: 1;
}

.vc-markdownTables-scroll-left::before,
.vc-markdownTables-scroll-right::after {
    width: calc(var(--vc-markdown-tables-mask-size) + 10px);
}

.vc-markdownTables-scroll {
    max-width: 100%;
    overflow-x: auto;
    background: transparent;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
}

.vc-markdownTables-mask-left .vc-markdownTables-scroll {
    mask-image: linear-gradient(to right,
            transparent 0,
            black var(--vc-markdown-tables-mask-size),
            black 100%);
}

.vc-markdownTables-mask-right .vc-markdownTables-scroll {
    mask-image: linear-gradient(to right,
            black 0,
            black calc(100% - var(--vc-markdown-tables-mask-size)),
            transparent 100%);
}

.vc-markdownTables-mask-left.vc-markdownTables-mask-right .vc-markdownTables-scroll {
    mask-image: linear-gradient(to right,
            transparent 0,
            black var(--vc-markdown-tables-mask-size),
            black calc(100% - var(--vc-markdown-tables-mask-size)),
            transparent 100%);
}

.vc-markdownTables-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    color: inherit;
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.vc-markdownTables-table th,
.vc-markdownTables-table td {
    max-width: 440px;
    padding: 6px 10px;
    border-right: 1px solid var(--background-modifier-accent);
    border-bottom: 1px solid var(--background-modifier-accent);
    vertical-align: top;
    white-space: pre-wrap;
}

.vc-markdownTables-table th {
    font-weight: 600;
    background: var(--background-modifier-hover);
}

.vc-markdownTables-table tbody tr:hover {
    background: var(--background-modifier-hover);
}

.vc-markdownTables-table th:last-child,
.vc-markdownTables-table td:last-child {
    border-right: 0;
}

.vc-markdownTables-table tr:last-child td {
    border-bottom: 0;
}

@supports (color: color-mix(in srgb, white, black)) {
    .vc-markdownTables-scrollFrame {
        border-color: color-mix(in srgb, currentcolor 24%, transparent);
    }

    .vc-markdownTables-toolbar,
    .vc-markdownTables-raw {
        border-color: color-mix(in srgb, currentcolor 18%, transparent);
    }

    .vc-markdownTables-table th,
    .vc-markdownTables-table td {
        border-right-color: color-mix(in srgb, currentcolor 18%, transparent);
        border-bottom-color: color-mix(in srgb, currentcolor 18%, transparent);
    }

    .vc-markdownTables-table th {
        background: color-mix(in srgb, currentcolor 7%, transparent);
    }

    .vc-markdownTables-table tbody tr:hover {
        background: color-mix(in srgb, currentcolor 5%, transparent);
    }
}

.vc-markdownTables-scrollFrame:is(.theme-dark *) {
    --vc-markdown-tables-fade-color: color-mix(in srgb, var(--background-primary) 88%, black);
}

.vc-markdownTables-scrollFrame:is(.theme-light *) {
    --vc-markdown-tables-fade-color: color-mix(in srgb, var(--background-primary) 88%, white);
}

.vc-markdownTables-raw::-webkit-scrollbar,
.vc-markdownTables-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.vc-markdownTables-raw::-webkit-scrollbar-thumb,
.vc-markdownTables-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: gray;
}

.vc-markdownTables-raw::-webkit-scrollbar-track,
.vc-markdownTables-scroll::-webkit-scrollbar-track,
.vc-markdownTables-raw::-webkit-scrollbar-corner,
.vc-markdownTables-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.vc-markdownTables-align-left {
    text-align: left;
}

.vc-markdownTables-align-center {
    text-align: center;
}

.vc-markdownTables-align-right {
    text-align: right;
}