/*
  The basic styles Trix normally adds itself, as <style> elements in <head>, when it starts (copied from Trix 2.1.19).

  Why they are here: Blazor's enhanced navigation (clicking a link inside admin) swaps the page without a full reload
  and makes <head> match the server's copy, which removes Trix's <style> elements. Trix adds them only once, so after
  such a click the link box ("[data-trix-dialog]") was always shown and couldn't be closed. A <link> to this file is
  in the server's <head> (App.razor), so it stays.

  When Trix is updated (lib/trix/README.txt), compare with the new version's injected styles: open a text block with a
  full page reload and copy the two <style> blocks from <head>.
*/

/* ---------- trix-editor ---------- */

trix-editor {
    display: block;
}

trix-editor:empty::before {
    content: attr(placeholder);
    color: graytext;
    cursor: text;
    pointer-events: none;
    white-space: pre-line;
}

trix-editor a[contenteditable=false] {
    cursor: text;
}

trix-editor img {
    max-width: 100%;
    height: auto;
}

trix-editor [data-trix-attachment] figcaption textarea {
    resize: none;
}

trix-editor [data-trix-attachment] figcaption textarea.trix-autoresize-clone {
    position: absolute;
    left: -9999px;
    max-height: 0px;
}

trix-editor [data-trix-attachment] figcaption[data-trix-placeholder]:empty::before {
    content: attr(data-trix-placeholder);
    color: graytext;
}

trix-editor [data-trix-cursor-target] {
    display: inline-block !important;
    width: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

trix-editor [data-trix-cursor-target=left] {
    vertical-align: top !important;
    margin-left: -1px !important;
}

trix-editor [data-trix-cursor-target=right] {
    vertical-align: bottom !important;
    margin-right: -1px !important;
}

/* ---------- trix-toolbar ---------- */

trix-toolbar {
    display: block;
    white-space: nowrap;
}

/* The link box: hidden until the link button opens it (Trix sets data-trix-active). */
trix-toolbar [data-trix-dialog] {
    display: none;
}

trix-toolbar [data-trix-dialog][data-trix-active] {
    display: block;
}

trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid {
    background-color: #ffdddd;
}