@layer components {

    /* Container
    /* -------------------------------------------------------------------- */

    .django-prose-editor-container {
        display: block;
        overflow: visible;
        position: relative;
    }

    /* Toolbar
    /* -------------------------------------------------------------------- */

    trix-toolbar {
        background-color: var(--trix-toolbar-bg, var(--color-canvas));
        border-block-end: 1px solid var(--color-ink-light);
        display: flex;
        font-size: inherit;
        margin: 0;
        max-inline-size: 100%;
        padding: 0.2em 0;
        position: sticky;
        inset-block-start: 0;
        z-index: 2;

        .trix-button-row {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
        }

        .trix-button-group {
            border: 0;
            display: flex;
            margin: 0;

            +.trix-button-group {
                margin-inline-start: 0.25em;
            }
        }

        .trix-button--icon-code {
            display: none;
        }
    }

    .trix-button {
        --trix-button-size: 44px;

        appearance: none;
        aspect-ratio: 1;
        background-color: transparent;
        block-size: var(--trix-button-size);
        border: none;
        border-radius: 0.2em;
        color: currentColor;
        cursor: pointer;
        display: grid;
        font-size: inherit;
        inline-size: var(--trix-button-size);
        max-inline-size: var(--trix-button-size);
        place-items: center;
        padding: 0;

        &:is(:focus, :hover) {
            background-color: var(--color-ink-lighter);
            box-shadow: none;
        }

        &:is(:active),
        &.trix-active {
            background-color: var(--color-selected);
        }

        &::before {
            background-size: 55%;
            opacity: 0.7;
        }

        &:hover::before,
        &.trix-active::before {
            opacity: 1;
        }

        @media (prefers-color-scheme: dark) {
            &::before {
                filter: invert(1);
            }
        }

        @media (min-width: 640px) {
            --trix-button-size: 2em;
        }
    }

    .trix-button--icon {
        inline-size: var(--trix-button-size);
        text-indent: -9999px;
    }

    /* Editor content
    /* -------------------------------------------------------------------- */

    trix-editor {
        min-block-size: calc(7lh + var(--block-space));
        outline: 0;

        ::selection {
            background: oklch(var(--lch-blue-light) / 0.5);
        }

        > :last-child {
            margin-block-end: 0;
        }
    }

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

    /* Dialogs (link, etc.)
    /* -------------------------------------------------------------------- */

    .trix-dialog {
        background-color: var(--color-canvas);
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.5em;
        box-shadow: var(--shadow);
        color: var(--color-ink);
        font-size: var(--text-small);
        padding: 0.75em;
        z-index: 2;

        .trix-input--dialog {
            background: var(--color-canvas);
            border: 1px solid var(--color-ink-light);
            border-radius: 0.3em;
            color: var(--color-ink);
            font-size: 1em;
            min-inline-size: 25ch;
            padding: 0.35em 0.6em;
        }

        .trix-button-group {
            display: flex;
            gap: 0.5em;
            margin-block-start: 0.5em;
        }

        .trix-button-group .trix-button {
            appearance: none;
            aspect-ratio: unset;
            background-color: var(--color-canvas);
            block-size: auto;
            border: 1px solid var(--color-ink-light);
            border-radius: 99rem;
            display: inline-flex;
            font-size: var(--text-x-small);
            inline-size: auto;
            max-inline-size: none;
            padding: 0.3em 1em;
            text-indent: 0;

            &:hover {
                background-color: var(--color-ink-lightest);
            }
        }
    }
}

/* Trix Content
 * -------------------------------------------------------------------------- */

.trix-content {
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;

    h1 {
        font-size: 1.3em;
        margin-bottom: 0.5em;
    }

    a {
        color: var(--color-txt--action);
        text-decoration: underline;

        /* Use foreground colors, if applied via color-picker */
        [style*="color"] {
            text-decoration: underline !important;
            text-decoration-color: unset !important;
        }
    }

    ul,
    ol {
        margin: 0;
        padding-inline-start: 2.25em !important;
    }

    ul li,
    ol li,
    li li {
        padding: 0 !important;
        margin: 0 !important;
    }

    pre {
        white-space: pre-wrap;
        background-color: var(--color-bg--surface);

        .sheet--world-perma & {
            background-color: #f8f8f8;
        }
    }

    /* Attachments */
    img {
        width: auto;
        max-height: 64rem;
    }

    action-text-attachment {
        display: contents;
    }

    .attachment-gallery {
        gap: 4px;

        .attachment {
            flex: 1 0 33%;
            margin: 0 0 1em;
            max-width: calc(33% - 10px);
        }

        &.attachment-gallery--2,
        &.attachment-gallery--4 {
            .attachment {
                flex-basis: 50%;
                max-width: calc(50% - 10px);
            }
        }
    }

    .attachment--remote img {
        text-align: inherit !important;
        display: inherit !important;
    }

    .attachment:not(.attachment--file) {
        .attachment__caption {
            display: none;
        }
    }

    .attachment--file {
        color: var(--color--txt);
        border: 0;
        border-radius: 10px;
        max-width: 200px;

        .attachment__progress {
            top: calc(100% - 12px);
            bottom: 0;

            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            height: 8px;
            border-radius: 4px;
            border: 1px solid var(--color-border);

            &::-webkit-progress-bar {
                background-color: var(--color-bg--surface);
                border-radius: 4px;
            }

            &::-webkit-progress-value {
                background-color: var(--color-secondary);
                border-radius: 4px;
            }

            &::-moz-progress-bar {
                background-color: var(--color-secondary);
                border-radius: 4px;
            }
        }
    }

    .attachment__file-link {
        inset: 0;
        position: absolute;
        text-indent: -9999em;
        z-index: 1;
    }

    .entry--announcement & .video-container {
        position: relative;
        overflow: hidden;
        width: 100%;

        &::after {
            display: block;
            content: "";
            padding-top: 56.25%;
        }

        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    /* Converts Trix colors in app/helpers/rich_text_helper#color_picker_dialog for display in dark mode */
    [data-color-scheme="dark"] & {

        /* Foreground colors */
        [style*="136, 118, 38"] {
            color: #faf785 !important;
        }

        [style*="185, 94, 6"] {
            color: #f8be6c !important;
        }

        [style*="207, 0, 0"] {
            color: #fa7b7b !important;
        }

        [style*="216, 28, 170"] {
            color: #fab7e6 !important;
        }

        [style*="144, 19, 254"] {
            color: #cebcfc !important;
        }

        [style*="5, 98, 185"] {
            color: #97cafa !important;
        }

        [style*="17, 138, 15"] {
            color: #b9f7b3 !important;
        }

        [style*="148, 82, 22"] {
            color: #e0be9d !important;
        }

        [style*="102, 102, 102"] {
            color: #b9b9b9 !important;
        }

        /* Background colors */
        [style*="250, 247, 133"] {
            background-color: #9b7d44 !important;
        }

        [style*="255, 240, 219"] {
            background-color: #993200 !important;
        }

        [style*="255, 229, 229"] {
            background-color: #6a2217 !important;
        }

        [style*="255, 228, 247"] {
            background-color: #7c3240 !important;
        }

        [style*="242, 237, 255"] {
            background-color: #725ead !important;
        }

        [style*="225, 239, 252"] {
            background-color: #204166 !important;
        }

        [style*="228, 248, 226"] {
            background-color: #175331 !important;
        }

        [style*="238, 226, 215"] {
            background-color: #473732 !important;
        }

        [style*="242, 242, 242"] {
            background-color: #4d4d4d !important;
        }

        /* Use body text color for links with only a background color applied */
        [style*="background-color"] {
            color: var(--color-txt);
        }
    }
}