/* =========================================================
   EDITOR WRAPPER
========================================================= */

.markItUp {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}

.markItUpContainer {
    position: relative;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    background: var(--wwr-mainback);

    font-family: inherit;
    font-size: 12px;
}


/* =========================================================
   TOOLBAR / MAIN STRUCTURE
========================================================= */

.markItUpHeader {
    position: relative;
    z-index: 10;

    width: 100%;
    min-height: 40px;

    box-sizing: border-box;

    padding: 7px 10px;

    border: 1px solid var(--wwr-border);
    border-bottom: 0;

    background: color-mix(
        in srgb,
        var(--wwr-post) 2%,
        var(--wwr-mainback)
    );
}


/* TOOLBAR LIST */

.markItUpHeader > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.markItUpHeader > ul::after {
    content: "";
    display: block;
    clear: both;
}


/* INDIVIDUAL BUTTONS */

.markItUpHeader > ul > li {
    position: relative;
    float: none;

    display: block;

    margin: 0;
    padding: 4px;

    border: 1px solid transparent;

    border-radius: 0;

    transition:
        background .2s ease,
        border-color .2s ease;
}


/* KEEP ORIGINAL ICON SPRITES */

.markItUpHeader > ul > li > a {
    display: block;

    width: 16px;
    height: 16px;

    padding: 3px;
    margin: 0;

    box-sizing: content-box;

    background-repeat: no-repeat;

    filter: grayscale(1) brightness(1.5);

    transition: filter .2s ease;
}


/* BUTTON HOVER */

.markItUpHeader > ul > li:hover:not(.markItUpSeparator) {
    border-color: var(--wwr-border);

    background: color-mix(
        in srgb,
        var(--wwr-post) 4%,
        transparent
    );
}

.markItUpHeader > ul > li:hover > a {
    filter: grayscale(1) brightness(2);
}


/* KEYBOARD FOCUS */

.markItUpHeader a:focus-visible {
    outline: 1px solid var(--wwr-acc);
    outline-offset: 3px;
}


/* =========================================================
   TOOLBAR SEPARATORS
========================================================= */

.markItUpHeader > ul > .markItUpSeparator {
    width: 1px;
    height: 18px;

    margin: 0 9px;
    padding: 0;

    border: 0;

    background: var(--wwr-border);
}


/* =========================================================
   TOOLBAR DROPDOWNS
========================================================= */

.markItUpHeader ul ul {
    display: none;

    position: absolute;
    z-index: 100;

    top: 100%;
    left: 0;

    min-width: 160px;

    padding: 5px 0;
    margin: 0;

    border: 1px solid var(--wwr-border);

    background: var(--wwr-mainback);

    box-shadow: 0 12px 25px rgba(0,0,0,.35);
}


/* SHOW DROPDOWNS */

.markItUpHeader ul li:hover > ul {
    display: block;
}


/* DROPDOWN ENTRIES */

.markItUpHeader ul ul li {
    position: relative;
    float: none;

    margin: 0;
    padding: 0;

    border: 0;
    border-bottom: 1px solid var(--wwr-border);

    background: transparent;
}

.markItUpHeader ul ul li:last-child {
    border-bottom: 0;
}


/* DROPDOWN LINKS */

.markItUpHeader ul ul a {
    display: block;

    width: auto;
    min-width: 0;
    height: auto;

    box-sizing: border-box;

    color: var(--wwr-post);

    font-size: 11px;
    line-height: 1.5;

    text-decoration: none;
}

.markItUpHeader ul ul a:hover {
    color: var(--wwr-post);

    background-color: color-mix(
        in srgb,
        var(--wwr-acc) 8%,
        var(--wwr-mainback)
    );
}


/* NESTED DROPDOWNS */

.markItUpHeader ul ul ul {
    top: -1px;
    left: 100%;
}


/* =========================================================
   COLOR PALETTE / PRESERVE COLOR SWATCHES
========================================================= */

.markItUpHeader .markItUpButton10 > ul {
    width: 84px;
    min-width: 0;

    padding: 2px;
}

.markItUpHeader .markItUpButton10 ul li {
    width: 25px;
    height: 25px;

    border: 1px solid var(--wwr-border);

    box-sizing: border-box;
}

.markItUpHeader .markItUpButton10 ul a {
    width: 100%;
    height: 100%;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   ACTUAL TEXT EDITOR
========================================================= */

.markItUp .markItUpEditor,
form textarea#message {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0;
    min-height: 360px;

    height: 400px;

    margin: 0;
    padding: 24px !important;

    box-sizing: border-box;

    border: 1px solid var(--wwr-border);
    border-radius: 0;

    background: var(--wwr-mainback);

    color: var(--wwr-post);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.8;

    resize: vertical;
    overflow: auto;

    overflow-wrap: break-word;

    outline: none;
    box-shadow: none;
}


/* EDITOR FOCUS */

.markItUp .markItUpEditor:focus,
form textarea#message:focus {
    border-color: color-mix(
        in srgb,
        var(--wwr-acc) 45%,
        var(--wwr-border)
    );

    outline: none;
}


/* =========================================================
   EDITOR FOOTER / RESIZE HANDLE
========================================================= */

.markItUpFooter {
    width: 100%;

    box-sizing: border-box;

    padding: 7px 12px;

    border: 1px solid var(--wwr-border);
    border-top: 0;

    background: color-mix(
        in srgb,
        var(--wwr-post) 2%,
        var(--wwr-mainback)
    );
}

.markItUpResizeHandle {
    width: 22px;
    height: 5px;

    margin: 0 auto;

    opacity: .35;

    cursor: n-resize;
}

.markItUpResizeHandle:hover {
    opacity: .8;
}


/* =========================================================
   PREVIEW FRAME
========================================================= */

.markItUpPreviewFrame {
    width: 100%;
    max-width: 100%;

    height: 300px;

    margin: 10px 0;

    box-sizing: border-box;

    border: 1px solid var(--wwr-border);

    background: var(--wwr-mainback);

    color: var(--wwr-post);
}


/* =========================================================
   SMALLER SCREENS
========================================================= */

@media (max-width: 700px) {

    .markItUpHeader {
        padding: 6px;
    }

    .markItUpHeader > ul {
        gap: 1px;
    }

    .markItUpHeader > ul > li {
        padding: 3px;
    }

    .markItUpHeader > ul > .markItUpSeparator {
        margin: 0 5px;
    }

    .markItUp .markItUpEditor,
    form textarea#message {
        padding: 15px !important;

        min-height: 280px;
        height: 350px;

        font-size: 13px;
    }

}