/*
 * Trix inside the admin theme. trix.css is unlayered, so it beats Tailwind's layered utilities: the editor
 * box is styled here instead, with the theme's colour variables, to match .form-control.
 */
trix-toolbar .trix-button-row {
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: visible;
}

trix-toolbar .trix-button-group,
trix-toolbar .trix-button-group:not(:first-child) {
    margin: 0;
    border-radius: 8px;
}

/* Icon buttons hide their label with a -9999px text-indent, which in RTL pushes it off the right of the page. */
trix-toolbar .trix-button--icon {
    overflow: hidden;
}

trix-toolbar .trix-button-group--file-tools {
    display: none;
}

trix-editor.trix-content {
    min-height: 12rem;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background: #fff;
    font-size: 0.875rem;
}

trix-editor.trix-content:focus {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
    outline: none;
}

.dark trix-editor.trix-content {
    border-color: var(--color-gray-700);
    background: var(--color-gray-900);
}

.dark trix-toolbar .trix-button-group,
.dark trix-toolbar .trix-button {
    border-color: var(--color-gray-700);
}

.dark trix-toolbar .trix-button.trix-active {
    background: var(--color-gray-700);
}

.dark trix-toolbar .trix-button--icon::before {
    filter: invert(1);
}

.dark trix-toolbar .trix-button:disabled::before {
    opacity: 0.4;
}

.dark trix-toolbar .trix-dialog {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
    box-shadow: none;
}

.dark trix-toolbar .trix-input--dialog {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-100);
}