/* Styles for <plucky-editor>. The element is a block; its toolbar and content
   area are created by the bundle. The textarea is hidden only once the
   editor has mounted (data-ready), so a failed load leaves it usable. */

plucky-editor {
    display: block;
    background: #fff;
}

plucky-editor[data-ready] > .plucky-editor__textarea {
    display: none;
}

plucky-editor > .plucky-editor__fallback {
    display: none;
}

/* A bundle that fails to load, or an element that fails to mount, sets
   data-failed and shows the notice at once. */
plucky-editor[data-failed] > .plucky-editor__fallback {
    display: block;
}

/* A bundle that loads but never defines the element fires no error event.
   Reveal the notice only after a grace period so a slow first download does
   not flash it on every page load. The zero-length animation with a delay
   keeps the notice invisible until the delay ends, then shows it. */
plucky-editor:not([data-ready]):not([data-failed]) > .plucky-editor__fallback {
    display: block;
    visibility: hidden;
    animation: plucky-editor-reveal 0s 3s both;
}

@keyframes plucky-editor-reveal {
    to {
        visibility: visible;
    }
}

/* Reference toolbar: white surface, 30px-tall controls, soft gray dividers and
   muted outline icons. Keep these colors local to the editor component. */
.plucky-editor__toolbar {
    --plucky-editor-tool-color: #59606f;
    --plucky-editor-tool-disabled: #a6abb5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 12px;
    background: #fff;
    border-bottom: 1px solid #dfe2e6;
    border-radius: 3px 3px 0 0;
}

.plucky-editor__toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    margin: 1px 0;
}

.plucky-editor__toolbar-group + .plucky-editor__toolbar-group {
    border-left: 1px solid #e5e5e5;
}

/* Retain the grouped controls without squeezing the story column on phones. */
@media (max-width: 575.98px) {
    .plucky-editor__toolbar {
        padding-inline: 0;
    }

    .plucky-editor__toolbar-group {
        padding-inline: 8px;
    }
}

.plucky-editor__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 30px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    padding: 5px;
    color: var(--plucky-editor-tool-color);
    cursor: pointer;
}

.plucky-editor__button:hover:not(:disabled) {
    background: #e9edf2;
}

.plucky-editor__button[aria-pressed="true"] {
    background: #d5dce6;
}

.plucky-editor__button:focus-visible,
.plucky-editor__font-size:focus-visible {
    outline: 2px solid var(--primary-color, #4a637d);
    outline-offset: -2px;
}

.plucky-editor__font-size {
    width: 72px;
    height: 30px;
    padding: 2px 4px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: var(--plucky-editor-tool-color);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.plucky-editor__button:disabled {
    color: var(--plucky-editor-tool-disabled);
    cursor: default;
}

/* CSS-relative asset URLs also work with Django's hashed static-file output.
   Masks let hover, disabled and active states share the button's icon color. */
.plucky-editor__icon {
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask: var(--plucky-editor-tool-icon) center / contain no-repeat;
}

.plucky-editor__button[data-command="undo"],
.plucky-editor__button[data-command="redo"] {
    --plucky-editor-tool-icon: url("../img/editor/undo.bfd11428df2d.svg");
}

.plucky-editor__button[data-command="redo"] .plucky-editor__icon {
    transform: scaleX(-1);
}

.plucky-editor__button[data-command="bold"] {
    --plucky-editor-tool-icon: url("../img/editor/bold.2d8066d48e45.svg");
}

.plucky-editor__button[data-command="italic"] {
    --plucky-editor-tool-icon: url("../img/editor/italic.2207d31d10d5.svg");
}

.plucky-editor__button[data-command="underline"] {
    --plucky-editor-tool-icon: url("../img/editor/underline.feff54a530c4.svg");
}

.plucky-editor__button[data-command="indent"],
.plucky-editor__button[data-command="outdent"] {
    --plucky-editor-tool-icon: url("../img/editor/indent.252027dd604f.svg");
}

.plucky-editor__button[data-command="outdent"] .plucky-editor__icon {
    transform: scaleX(-1);
}

.plucky-editor__button[data-command="link"] {
    --plucky-editor-tool-icon: url("../img/bootstrap-link-45deg.05e5053f4723.svg");
}

.plucky-editor__button[data-command="bullet_list"] {
    --plucky-editor-tool-icon: url("../img/editor/bullet-list.4609f48d31c2.svg");
}

.plucky-editor__button[data-command="ordered_list"] {
    --plucky-editor-tool-icon: url("../img/editor/ordered-list.41a8bb810255.svg");
}

.plucky-editor__button[data-command="blockquote"] {
    --plucky-editor-tool-icon: url("../img/editor/quote.741028688ab6.svg");
}

.plucky-editor__button[data-command="clear"] {
    --plucky-editor-tool-icon: url("../img/editor/clear.eefe556b71b2.svg");
}

.plucky-editor__content {
    position: relative;
}

.plucky-editor__surface {
    padding: 10px;
    /* About five text rows; longer content still expands naturally. */
    min-height: 140px;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: var(--plucky-font-family, inherit);
    font-size: 16px;
    color: #212529;
}

.plucky-editor__status {
    padding: 2px 10px;
    border-top: 1px solid #dfe2e6;
    font-size: 12px;
    color: #6c757d;
    text-align: right;
}

plucky-editor.plucky-editor--empty .plucky-editor__surface::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #6c757d;
    pointer-events: none;
}

.plucky-editor__surface blockquote {
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    margin: 0 0 1rem;
    padding-left: 1rem;
}