/* BARD
=================================================== */
@layer ui {
    /* .grid-cell, [data-ui-input-group] are exceptions for Bard fieldtypes inside a Grid fieldtype, since these cause double borders */
    .bard-fieldtype:not(.form-group, .grid-cell, [data-ui-input-group]) {
        @apply relative rounded-lg border outline-hidden dark:border-gray-700 with-contrast:border-gray-500;
    }
}
/* BARD / EDITOR
=================================================== */
@layer ui {
    .bard-editor {
        /* We need a transparent border inside Bard to properly see the focus outline. Without this border, the focus outline is hairline-thin */
        border: 1px solid transparent;
        @apply relative rounded-lg p-0 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
        /* The focus state inherits this */
        > * {
            @apply rounded-b-lg;
        }
        .ProseMirror {
            @apply min-h-40 p-2 leading-tight;
            @apply leading-normal @md/bard:p-2;
            @apply @lg/bard:p-4;
        }
        .bard-error {
            @apply whitespace-nowrap bg-red-100 p-2 text-xs text-red-600 @lg:px-4;
        }
        p, ol, li {
            @apply st-text-legibility;
        }
        &:has(
            .bard-content *:focus,
            .st-set-is-selected
        ) {
            /* When we're focused on something else inside the .bard-editor, remove the outline on the .bard-editor, otherwise we have two focus outlines.
            E.g. If you have Bard > Replicator > Text field, when you focus on the internal text field, the outside .bard-editor should lose its outline */
            outline: none;
        }
    }
}
/* BARD / FOOTER TOOLBAR
=================================================== */
@layer ui {
    .bard-fieldtype:has(.bard-footer-toolbar) {
        .bard-editor {
            /* Remove the border-radius from the main container when we have the bottom toolbar (e.g. Reading Time) since it's no longer the last container in the vertical stack; instead the footer toolbar is now rounded */
            border-radius: 0;
        }
    }
}
/* BARD / MODES
=================================================== */
@layer ui {
    .bard-editor.mode\:read-only .ProseMirror {
        @apply bg-gray-300 text-gray-700 dark:bg-gray-600 dark:text-gray-100;
    }

    .bard-editor.mode\:minimal .ProseMirror {
        min-height: 80px;
    }

    .bard-editor.mode\:inline .ProseMirror {
        @apply p-2;
        min-height: 38px;
        p {
            @apply mb-0 leading-normal;
        }
    }
}
/* BARD / MODES / FIXED
=================================================== */
@layer ui {
    .bard-fixed-toolbar {
        @apply top-0 flex items-start justify-between rounded-t-[calc(var(--radius-lg)-1px)] border-b border-gray-300 bg-gray-50 p-1 text-sm shadow-none px-2 py-1 dark:border-white/10 dark:bg-gray-925;

        .bard-toolbar-button {
            @apply m-0 flex size-8 items-center justify-center rounded-sm px-1 text-center text-base text-gray-900 dark:text-gray-100;

            svg {
                @apply h-4 w-auto;
            }

            &:hover {
                @apply bg-gray-200 dark:bg-gray-600;
            }

            &:focus {
                @apply focus-outline;
            }

            &.active {
                @apply bg-gray-300 text-gray-925 dark:bg-gray-600 dark:text-white;
            }

            &:disabled {
                @apply opacity-50;
                &:hover {
                    @apply text-gray-900 dark:text-gray-100;
                }
            }
        }

        .active {
            @apply button-active;
            svg {
                @apply text-gray-925;
                :where(.dark) & {
                    @apply text-white;
                }
            }
        }

        /* e.g. the blueprint configuration */
        &.dark {
            @apply rounded-full bg-gray-900 px-4 shadow-lg;

            button {
                @apply mx-0.5 my-0 flex size-8 items-center justify-center rounded-sm bg-transparent px-1 text-center text-base text-gray-500;

                svg {
                    @apply h-4 w-auto;

                    .active & {
                        @apply text-white;
                    }
                }
            }
        }

        &.bard-toolbar-setting {
            @apply grid grid-cols-[repeat(auto-fit,minmax(--spacing(8),1fr))] rounded-[--spacing(5)];

            button {
                @apply justify-self-center;
            }
        }

        /* When there's a fixed toolbar the bard editor should have square radius in the top corners to but up against the bottom of the toolbar */
        .bard-fieldtype:has(> &) {
            .bard-editor:focus-within {
                border-top-left-radius: 0!important;
                border-top-right-radius: 0!important;
            }
        }
    }

    /* Only top-level Bard fields should have a sticky header */
    /* =Jay. I don't think we have the "workspace" class anymore, in which case this should be removed */
    .workspace .publish-fields:not(.replicator-set-body) > .bard-fieldtype .bard-fixed-toolbar,
    .live-preview .publish-fields:not(.replicator-set-body) > .bard-fieldtype .bard-fixed-toolbar {
        @apply sticky;
    }

    .bard-fixed-toolbar {
        z-index: var(--z-index-portal);
        position: sticky;
        /* Opt out the toolbar of scroll anchoring. Firefox's scroll anchoring adjusts the scroll position to compensate for the perceived layout change, scrolling up to the parent Bard's top. */
        overflow-anchor: none;
        @apply sm:-top-2;
        /* Prevent the sticky toolbar from hitting the very end of container, which causes it to overlap the container's border-radius */
        margin-block-end: 8px;
        /* Pull the subsequent element up to compensate for this. The focus ring adjustment here keeps the focus ring from disappearing into the toolbar, which would make the focus ring appear bottom heavy. */
        + * {
            --focus-ring-adjustment: 0.7px;
            margin-block-start: calc(-8px + var(--focus-ring-adjustment));
        }
    }

    /* [1] Where a Bard fieldtype with a fixed toolbar... */
    .bard-fieldtype:has(> .bard-fixed-toolbar) {
        /* [2] has a any nested fieldtype with focus, e.g. a Markdown toolbar or another Bard toolbar */
        &:has(.publish-fields:focus-within) {
            /* [/3] release the sticky positioning so that it doesn't cover other UI elements */
            > .bard-fixed-toolbar {
                position: unset;
            }
        }
    }

    /* Bard > Grid > Bard */
    .bard-content .grid-fieldtype .bard-fixed-toolbar {
        @apply top-16;
    }

    /* Fixed toolbar inside a stack */
    .stack-content .bard-fixed-toolbar {
        top: -24px;
    }

    /* Responsive Wangjangling */
    @media (width >= theme(--breakpoint-md)) {
        /*  Fixed toolbar below fixed global header */
        .bard-fixed-toolbar {
            /* Fixed toolbar inside a stack */
            .stack-content .bard-fieldtype .bard-fieldtype & {
                top: 16px;
            }
        }

        /* We don't need the `top` when in Live Preview */
        .live-preview .bard-fixed-toolbar {
            top: 0;
        }
    }
}
/* BARD / MODES / FLOATING
=================================================== */
@layer ui {
    .bard-floating-toolbar {
        /* We need to pull this above other things such as theads, e.g. Grid fieldtype > Bard fieldtype > floating toolbar. */
        @apply flex rounded-full bg-black px-2 shadow-lg whitespace-nowrap z-(--z-index-draggable) relative;

        &:before {
            @apply border-t-black top-full start-1/2 absolute -ml-[3px] content-none border-6 border-transparent;
        }

        button svg {
            @apply text-white opacity-100;
        }
    }

    .bard-footer-toolbar {
        @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400;
        padding: 8px 12px;

        .bard-fullscreen & {
            @apply sticky bottom-0 z-10;
        }
    }

    .bard-set:active .sortable-handle:hover ~ * .popover {
        display: none;
    }

    .bard-set.has-error > .replicator-set-header label {
        @apply text-red-600;
    }
}

/* The set selection options for each text block
  ========================================================================== */
@layer ui {
    .bard-set-selector {
        /*  transition: all .15s ease-in-out; */

        .dropdown-menu {
            left: -5px;
            [dir='rtl'] & {
                left: auto;
                right: -5px;
            }
            right: auto;
            [dir='rtl'] & {
                right: auto;
                left: auto;
            }
        }
    }
}
/* BARD / FULL SCREEN
=================================================== */
@layer ui-states {
    .bard-fullscreen {
        @apply fixed inset-0 min-h-screen overflow-scroll border-none rounded-none bg-gray-100 pt-14 dark:bg-gray-850;

        & > .bard-editor {
            @apply relative mx-auto my-6 max-w-page rounded-lg bg-white px-8 shadow-ui-md dark:bg-gray-925 dark:shadow-lg;
        }
        .bard-content {
            @apply dark:bg-gray-925;
        }

        .bard-fixed-toolbar {
            /* Don't affect nested toolbars; only the one at the very top */
            &:not(.bard-fieldtype.form-group .bard-fieldtype.form-group &) {
                padding: 7px 8px;
                margin-block-end: 0;
                top: 0;
                background: unset;
                border: unset;

                button {
                    @apply mx-1;
                }
            }
        }

        & > .bard-editor > div > .ProseMirror {
            @apply px-6 py-16;
            min-height: calc(100vh - 120px);
        }

        .bard-content:not(.bard-set *) {
            > p > code,
            > pre code {
                @apply bg-purple-100;
            }
        }

        .bard-set-selector {
            @apply ms-6;
        }

        .bard-field-options {
            @apply fixed inset-x-0 top-0 w-full bg-gray-700 p-4 text-end z-1;

            .icon {
                font-size: 24px;
            }

            a {
                @apply ms-4 text-white opacity-100;
            }
        }
    }
}

/* Typography
   -
   Selectors are specific so they don't cascade into the sets, which
   all sit inline within the rest of the elements.
   ========================================================================== */
@layer ui {
    .bard-fieldtype .ProseMirror {
        outline: 0;
    }

    .bard-fieldtype .bard-content {
        @apply text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-900 rounded-lg;
        blockquote,
        ol,
        p,
        ul {
            margin-top: 0;
            margin-bottom: 0.85em;
            table &:where(:last-child, :nth-last-child(2):has(+ .column-resize-handle)) {
                /* If you type a single line of text in a table fieldtype cell you don't want it to have a bottom margin */
                margin-block-end: 0;
            }

            b,
            strong {
                @apply font-bold text-gray-800 dark:text-gray-100;
            }

            em,
            i {
                font-style: italic;
            }

            a {
                @apply break-words text-blue-600 underline dark:text-blue-400;
            }

            a:active,
            a:focus,
            a:hover {
                outline: 0;
                text-decoration: underline;
            }

            img {
                border: 0;
                max-width: 100%;
            }
        }

        blockquote,
        blockquote :is(ol li, ul li),
        ol li,
        ul li {
            > p {
                @apply mb-0;
            }
        }

        hr {
            @apply bg-gray-200 dark:bg-gray-500 h-0.75 border-0 my-8;
            &::after,
            &::before {
                display: table;
                content: ' ';
            }
            &:after {
                clear: both;
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            @apply mt-5 mb-2.5 font-bold text-gray-900 dark:text-gray-100;

            b,
            strong {
                @apply font-bold;
            }

            a {
                @apply break-words text-blue-700 underline dark:text-blue-100;
            }

            a:active,
            a:focus,
            a:hover {
                outline: 0;
                text-decoration: underline;
            }

            &:first-child {
                margin-top: 0;
            }
        }

        h1 { @apply text-3xl; }
        h2 { @apply text-2xl; }
        h3 { @apply text-xl; }
        h4 { @apply text-base; }
        h5 { @apply text-sm; }
        h6 { @apply text-2xs uppercase text-gray-800 dark:text-gray-500 tracking-wider; }

        ul,
        blockquote ul,
        .tableWrapper table ul {
            list-style-type: disc;
        }

        ol,
        blockquote ol,
        .tableWrapper table ol {
            list-style-type: decimal;
        }

        ol,
        ul,
        blockquote :is(ol, ul) {
            @apply ms-4 ps-4;
        }

        .tableWrapper table :is(ol, ul) {
            @apply ms-4 ps-4;
        }

        :is(ol, ul) :is(ol, ul) {
            @apply ms-4 ps-4 my-0;
        }

        :is(ol, ul) {
            ul {
                list-style-type: circle;
            }
            ol {
                list-style-type: decimal;
            }
        }

        blockquote {
            @apply border-gray-900 dark:border-gray-100 px-4 text-gray-900 dark:text-gray-100 border-s-4 ms-1;
            &:first-child {
                margin-top: 0;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }

        table {
            .tableWrapper &,
            blockquote > .tableWrapper &,
            :is(ol, ul) li > .tableWrapper & {
                @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-gray-600 border-collapse table-fixed;

                th {
                    @apply bg-gray-200 font-bold dark:bg-gray-600 text-start;
                }

                td,
                th {
                    @apply relative border px-2 py-1 align-top dark:border-gray-600;
                    min-width: 1em;
                }

                .selectedCell {
                    @apply relative;

                    &::after {
                        @apply pointer-events-none absolute inset-0 bg-gray-400 opacity-25;
                        content: '';
                    }
                    :is(.dark) &::after {
                        @apply bg-gray-600;
                    }
                }

                a {
                    @apply break-words text-blue-700 underline dark:text-blue-100;
                }

                a:active,
                a:focus,
                a:hover {
                    outline: 0;
                    text-decoration: underline;
                }
            }
        }

        p > code {
            @apply rounded-sm bg-purple-100 dark:bg-blue-900 text-purple-700 dark:text-blue-100 font-mono text-xs px-1 py-0.5;
        }

        pre {
            @apply mb-2;
            code {
                @apply block w-full rounded-lg bg-gray-200 p-4 font-mono text-xs dark:bg-black dark:text-gray-100 leading-normal mb-4;
            }
        }
    }
}

/* Placeholder
========================================================================== */
@layer ui {
    .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
        @apply text-gray-600 float-start h-0 pointer-events-none;
        content: attr(data-placeholder);
    }
    .dark .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
        @apply text-gray-400;
    }
}

/* Link toolbar
  ========================================================================== */
@layer ui {
    .bard-link-toolbar {
        .input {
            @apply h-8 border-none bg-transparent p-0 text-xs shadow-none outline-none w-60;
        }

        .bard-toolbar-button {
            @apply p-0 text-gray-700 outline-hidden;
            font-size: 16px;

            &:hover {
                @apply text-gray-900;
            }
        }
    }

    .bard-inline-image-container {
        @apply relative mb-6 whitespace-normal rounded-sm border bg-white dark:border-gray-600 dark:bg-gray-900 hover:cursor-grab;
    }
}

/* Bard Table
  ========================================================================== */
@layer ui {
    .bard-fieldtype .ProseMirror {
        &.resize-cursor {
            @apply cursor-col-resize;
        }

        .tableWrapper {
            @apply overflow-x-auto;
        }

        table .column-resize-handle {
            @apply pointer-events-none absolute bottom-0 top-0 bg-blue-200 w-0.5 right-[-2px];
        }
    }
}










