html {
    --hugerte-menubar-background-color: var(--lumo-contrast-5pct);
    --hugerte-pop-arrow-border: #eee;
}

[theme~="dark"] {
    --hugerte-menubar-background-color: var(--lumo-base-color);
    --hugerte-pop-arrow-border: var(--lumo-base-color);
}

vaadin-huge-rte {
    .tox {
        flex-grow: 1;
        box-sizing: border-box;

        &.tox-hugerte {
            border: 1px solid var(--lumo-contrast-20pct);
            border-radius: var(--lumo-border-radius-m);
        }

        .tox-editor-header {
            z-index: 1; /*to prevent overlapping on the applayout menu overlay*/
        }

        .tox-editor-header > .tox-menubar {
            background-color: var(--hugerte-menubar-background-color);
            padding-left: var(--lumo-space-s);
            padding-right: var(--lumo-space-s);
        }

        .tox-editor-container .tox-editor-header .tox-toolbar-overlord > .tox-toolbar__primary {
            background-color: var(--hugerte-menubar-background-color);
            border-top: unset;

            /*
            when shown in a vaadin dialog, shrinking the dialog via resizing lets the toolbar's height "jump" for
            tiny moments, which makes the whole dialog "flickering". The max height settings prevents that. The 39px
            are taken from the used hugerte skin and might change in future.
            */
            max-height: var(--vaadin-huge-rte-toolbar-height, 39px);
        }

        .tox-editor-container .tox-editor-header:not(.tox-hugerte-inline) {
            box-shadow: var(--lumo-box-shadow-xs);
            padding: 0;
        }

        .tox-editor-container .tox-editor-header .tox-toolbar-overlord {
            border-top: unset;
            margin: 0;
            padding: 0;
        }

        :is(.tox-tbtn,
            .tox-tbtn--disabled,
            .tox-mbtn,
            .tox-split-button:focus) {
            /* keep this before the --enabled variants, otherwise it will override (or needs a :not)*/
            background: transparent;
        }

        .tox-tbtn--enabled:not(.tox-split-button__chevron) {
            background: var(--lumo-primary-color);
        }

        .tox-tbtn--enabled.tox-tbtn--disabled:not(.tox-split-button__chevron) {
            background: var(--lumo-primary-color-50pct);
        }

        .tox-tbtn:hover {
            background: var(--lumo-contrast-10pct);
        }

        /*.tox-tbtn--disabled:hover {*/
        .tox-tbtn--disabled .tox-tbtn:hover,
        .tox-split-button.tox-tbtn--disabled:hover,
        .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover{
            background: var(--lumo-contrast-5pct);
        }

        .tox-tbtn--enabled:hover:not(.tox-split-button__chevron) {
            background: var(--lumo-primary-color-50pct);
        }
        .tox-tbtn--enabled.tox-tbtn--disabled:hover:not(.tox-split-button__chevron) {
            background: var(--lumo-primary-color-10pct);
        }

        .tox-tbtn--disabled[aria-disabled="true"] .tox-icon > svg {
            fill: var(--lumo-contrast-20pct);
        }

        .tox-tbtn--disabled[aria-disabled="true"].tox-tbtn--enabled .tox-icon > svg {
            fill: var(--lumo-primary-contrast-color);
        }

        .tox-tbtn .tox-icon > svg {
            fill: var(--lumo-contrast-60pct);
        }

        .tox-tbtn--enabled .tox-icon > svg {
            fill: var(--lumo-primary-contrast-color);
        }

        .tox-tbtn--enabled:hover .tox-icon > svg {
            fill: var(--lumo-primary-contrast-color);
        }

        .tox-statusbar__text-container .tox-statusbar__path-item {
            color: var(--lumo-secondary-text-color);
        }

        .tox-statusbar__text-container .tox-statusbar__path-divider {
            color: var(--lumo-secondary-text-color);
        }

        .tox-statusbar__text-container {
            font-size: var(--lumo-font-size-s);
        }

        .tox-mbtn.tox-mbtn--select.tox-mbtn--active {
            background: var(--lumo-primary-color-50pct);
            color: var(--lumo-primary-contrast-color);

        }

        /*.tox-menubar > .tox-mbtn.tox-mbtn--select:hover:not(:disabled) {*/
        /*  background: var(--lumo-primary-color-10pct);*/
        /*}*/

        .tox-mbtn.tox-mbtn--select {
            color: var(--lumo-body-text-color);
            font-size: var(--lumo-font-size-m);

            &[disabled] {
                color: var(--lumo-disabled-text-color);
            }
        }

        .tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke {
            color: var(--lumo-body-text-color);

            &[disabled] {
                color: var(--lumo-disabled-text-color);
            }
        }

        .tox-menu.tox-collection.tox-collection--list.tox-selected-menu {
            border-radius: var(--lumo-border-radius-m);
        }

        .tox-menu.tox-collection.tox-collection--list {
            background: var(--lumo-base-color);
            box-shadow: var(--lumo-box-shadow-m);
        }

        .tox-menu.tox-collection--list .tox-collection__item.tox-collection__item--active {
            color: var(--lumo-body-text-color);
            background-color: var(--lumo-primary-color-10pct);
        }

        .tox-menu.tox-collection.tox-collection--list {
            min-width: var(--hugerte-mce-menu-width, 300px);
        }

        .tox-menu-nav__js.tox-collection__item.tox-collection__item {
            color: var(--lumo-body-text-color);
        }

        .tox-collection > .tox-collection__group {
            border-color: var(--lumo-contrast-20pct) !important;
            padding-top: var(--lumo-space-s) !important;
            padding-bottom: var(--lumo-space-s) !important;
        }

        div.tox-collection__item > div.tox-collection__item-accessory {
            color: var(--lumo-secondary-text-color);
        }

        div.tox-collection__item > div.tox-collection__item-label {
            font-size: var(--lumo-font-size-m);
            line-height: var(--lumo-line-height-m);
        }

        div.tox-collection__item > div.tox-collection__item-icon {
            width: var(--lumo-size-s);
            height: var(--lumo-size-s);
        }

        .tox-collection__item > .tox-collection__item-caret svg {
            fill: var(--lumo-contrast-50pct);
        }

        .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker__selected {
            background-color: var(--lumo-primary-color-10pct);
            border-color: var(--lumo-primary-color-50pct);
        }

        .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker {
            border-color: var(--lumo-contrast-20pct);
        }

        .tox-pop,
        .tox-toolbar__overflow,
        .tox-menu {
            width: max-content;
        }

        .tox-edit-area::before {
            border-color: var(--vaadin-huge-rte-editor-focus-color, var(--lumo-primary-color));
        }

        .tox-split-button:hover {
            box-shadow: 0 0 0 1px var(--lumo-primary-color-50pct);
        }

        .tox-statusbar {
            background-color: var(--lumo-base-color);
            color: var(--lumo-body-text-color);
        }

        .tox-statusbar a,
        .tox-statusbar__path-item,
        .tox-statusbar__wordcount {
            color: var(--lumo-body-text-color);
        }

        .tox-statusbar__path-item:hover {
            color: var(--lumo-primary-text-color) !important;
        }

        .tox-statusbar a:hover {
            color: var(--lumo-primary-text-color) !important;
            text-decoration: underline;
        }
    }

    .hugerte-flow[readonly] .tox-editor-header {
        display: none;
    }

    .hugerte-flow[disabled]:not([readonly]) {
        opacity: 0.5;
    }

    .tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type),
    .tox[dir="rtl"] .tox-toolbar__group:not(:last-of-type) {
        border-right-color: var(--lumo-contrast-20pct);
    }

    &[invalid] .tox-edit-area::before {
        --vaadin-huge-rte-editor-focus-color: var(--vaadin-huge-rte-invalid-editor-focus-color, var(--lumo-error-color));
    }

    &[invalid]:not([theme*="no-invalid-background"]) .tox-edit-area__iframe {
        background-color: var(--vaadin-huge-rte-invalid-editor-background-color, var(--lumo-error-color-10pct));
    }

    &[theme*="no-editor-focus-highlight"] .tox-edit-area::before {
        border: 0 none;
    }
}

/* overlays */
.tox.tox-hugerte-aux {
    .tox-menu.tox-collection.tox-collection--list.tox-selected-menu {
        border-radius: var(--lumo-border-radius-m);
    }

    .tox-menu.tox-collection.tox-collection--list {
        background: var(--lumo-base-color);
        box-shadow: var(--lumo-box-shadow-m);
    }

    .tox-menu.tox-collection--list .tox-collection__item.tox-collection__item--active {
        color: var(--lumo-body-text-color);
        background-color: var(--lumo-primary-color-10pct);
    }

    .tox-menu.tox-collection.tox-collection--list {
        min-width: var(--hugerte-mce-menu-width, 200px);
    }

    .tox-menu-nav__js.tox-collection__item.tox-collection__item--enabled {
        background-color: var(--lumo-base-color);
    }

    .tox-menu-nav__js.tox-collection__item.tox-collection__item {
        color: var(--lumo-body-text-color);
    }

    .tox-menu {
        width: max-content;
    }

    .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker__selected {
        background-color: var(--lumo-primary-color-10pct);
        border-color: var(--lumo-primary-color-50pct);
    }

    .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker {
        border-color: var(--lumo-contrast-20pct);
    }

    .tox-insert-table-picker {
        background-color: var(--lumo-base-color);
    }

    .tox-toolbar__overflow {
        background-color: var(--hugerte-menubar-background-color) !important;
        box-shadow: var(--lumo-box-shadow-m) !important;
        border: 1px solid var(--lumo-contrast-10pct) !important;
    }

    .tox-tbtn {
        background-color: var(--hugerte-menubar-background-color);
        color: var(--lumo-body-text-color)
    }

    .tox-tbtn--enabled:hover:not(.tox-split-button__chevron) {
        background: var(--lumo-primary-color-50pct);
    }

    .tox-tbtn--disabled[aria-disabled="true"] .tox-icon > svg {
        fill: var(--lumo-contrast-20pct);
    }

    .tox-tbtn .tox-icon > svg {
        fill: var(--lumo-contrast-60pct);
    }

    .tox-tbtn--enabled .tox-icon > svg {
        fill: var(--lumo-primary-contrast-color);
    }

    .tox-tbtn--enabled:hover .tox-icon > svg {
        fill: var(--lumo-primary-contrast-color);
    }

    .tox-tbtn:focus {
        background: var(--lumo-primary-color-10pct);
    }

    .tox-toolbar__group button.tox-tbtn:hover {
        background: var(--lumo-contrast-10pct);
    }

    .tox-dialog-wrapper .tox-dialog-backdrop {
        background-color: var(--lumo-contrast-50pct);
    }

    .tox-dialog {
        background-color: var(--lumo-base-color);
        color: var(--lumo-body-text-color);
        box-shadow: var(--lumo-box-shadow-m);
        border-radius: var(--lumo-border-radius-m);
    }

    .tox-dialog__header {
        background-color: var(--lumo-base-color);
        color: var(--lumo-body-text-color);
    }

    .tox-dialog__body {
        color: var(--lumo-body-text-color);
    }

    .tox-dialog__body-content .tox-form__group h1 {
        color: var(--lumo-body-text-color);
    }

    .tox-dialog__footer {
        background-color: var(--lumo-base-color);
    }

    .tox-dialog__footer .tox-button {
        background-color: var(--lumo-primary-color);
        color: var(--lumo-primary-contrast-color);
        border-color: var(--lumo-primary-color);
    }

    .tox-dialog__header .tox-button--naked {
        color: var(--lumo-contrast-40pct);
    }

    .tox-dialog__header .tox-button--naked.tox-button--icon:hover:not(:disabled) {
        color: var(--lumo-contrast-20pct);
    }

    .tox-dialog__body-nav-item {
        color: var(--lumo-body-text-color);
    }

    .tox-dialog__body-nav-item--active {
        color: var(--lumo-primary-text-color);
        border-bottom: 2px solid var(--lumo-primary-color);
    }

    .tox-pop__dialog {
        background-color: var(--lumo-base-color);
        border-color: var(--lumo-base-color);
    }

    .tox-pop.tox-pop--left::before {
        border-color: transparent var(--hugerte-pop-arrow-border) transparent transparent;
    }
    .tox-pop.tox-pop--left::after {
        border-color: transparent var(--lumo-base-color) transparent transparent;
    }
}