.tinymce-styles {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    color: rgba(13, 17, 38, 1);

    &:where(.dark-mode *) {
        color: #d1d1d1;
    }

    b,
    strong {
        font-weight: bold;
    }

    i,
    em {
        font-style: italic;
    }

    u {
        text-decoration: underline;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0px !important;
        color: black;
        &:where(.dark-mode *) {
            color: white;
        }
    }

    h1 {
        font-size: 1.5rem;
        line-height: calc(2 / 1.5);
    }

    h2 {
        font-weight: bold;
        font-size: 1.25rem;
        line-height: calc(1.75 / 1.25);
    }

    h3 {
        font-weight: bold;
        font-size: 1.125rem;
        line-height: calc(1.75 / 1.125);
    }

    h4 {
        font-weight: bold;
        font-size: 1rem;
        line-height: calc(1.5 / 1);
    }

    h5 {
        font-weight: bold;
    }

    h6 {
        font-weight: bold;
    }

    a {
        text-decoration: underline;
        color: #4778f5;
    }

    ul,
    ol {
        margin: 0px;
        /* margin-block-start: 0.5em; */
        /* margin-block-end: 0.5em; */
        padding-inline-start: 40px;
    }

    ul {
        list-style: disc;
    }

    ol {
        list-style: decimal;
    }

    input[readonly] {
        width: 100%;
        padding: 1rem;
        border-radius: 5px;
        background: var(--red-3);
        &:where(.dark-mode *) {
            background: #2f0805;
        }
    }

    .tinymce-url {
        width: 100%;
        padding: 1rem;
        border-radius: 5px;
        background: var(--red-3);
        white-space: nowrap;
        overflow-x: auto;
        /* color: var(--red-10); */

        &:where(.dark-mode *) {
            background: #2f0805;
        }
    }

    textarea {
        padding: 1.5rem;
        color: #abb2bf;
        background: #282c34;
        font-size: 1em;
        width: 100%;
    }

    .inline-code {
        font-weight: var(--font-weight-bold);
        background-color: var(--gray-3);
        color: var(--black);
        font-family: 'Space Mono', monospace;
        padding: var(--spacing-xs);
        &:where(.dark-mode *) {
            background-color: var(--gray-11);
            color: var(--white);
        }
    }

    [style*='background-color'] {
        &:where(.dark-mode *) {
            color: rgba(13, 17, 38, 1);
        }
    }

    table {
        overflow-x: auto;
        display: block;
    }

    table:not([style*='background-color']) {
        border-spacing: 0px;
        /* border-radius: 1rem; */

        /* border-width: 1px; */
        /* border-color: rgb(222 224 227); */

        /* &:where(.dark-mode *) { */
        /* border-width: 2px; */
        /* border-color: rgba(255, 255, 255, 0.18); */
        /* } */
    }

    table:not([style*='background-color']) th {
        border-color: rgb(222 224 227);
        padding: 1.5rem !important;
        text-align: left;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;

        color: var(--text-secondary);
    }

    table:not([style*='background-color']) td {
        border-width: 1px;
        /* border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-top-width: 1px; */

        border-color: rgb(222 224 227);
        padding: 1.5rem !important;
        font-size: 1.125rem;
        line-height: 1.75rem;

        &:where(.dark-mode *) {
            border-width: 2px;
            border-color: rgba(255, 255, 255, 0.18);
        }
    }

    /* table tbody tr:hover td {
        background-color: rgb(247 247 248);

        &:where(.dark-mode *) {
            background-color: rgb(20 21 26);
        }
    }

    table tbody tr:hover:last-child {
        td:first-child {
            border-radius: 0 0 0 1rem;
        }

        td:last-child {
            border-radius: 0 0 1rem 0;
        }
    } */
}