.markdown-editor-container {
    min-width: 30rem;

    li::marker {
        --tw-prose-bullets: #6b7280;
        --tw-prose-counters: #374151;
    }

    .toolbar {
        @apply border-b flex justify-between px-4 py-2.5 text-sm;

        .mode-buttons {
            @apply flex gap-x-4 h-6;

            > div {
                @apply first-letter:uppercase border-b border-b-transparent select-none px-1;
            }
        }

        .style-buttons {
            @apply gap-x-2;

            > div {
                @apply text-gray-900 cursor-pointer w-6 h-6 flex justify-center items-center select-none;

                svg {
                    @apply w-5 h-5;
                }
            }
        }
    }

    .markdown-editor {
        @apply flex flex-col relative min-h-[10rem];

        .markdown-editor-write,
        .markdown-editor-preview {
            @apply min-h-[10rem] max-h-[26rem] overflow-y-auto bg-transparent;
        }

        .markdown-editor-write {
            @apply flex-col;

            textarea {
                @apply h-full outline-none resize-none border-none p-5 grow bg-transparent;
            }

            .markdown-editor-file-input {
                @apply w-full px-2.5 py-2 pb-1 text-sm block text-gray-500 cursor-pointer shrink-0 border-t border-gray-300 border-dashed;

                input[type='file'] {
                    @apply hidden;
                }
            }

            .mentions-listbox {
                @apply border border-solid rounded-md shadow-md w-64 bg-white overflow-hidden;

                .mentions-listbox-item {
                    @apply py-2 px-3 cursor-pointer;

                    &.mentions-listbox-item-active {
                        @apply bg-blue-100;
                    }

                    .mentions-listbox-item-name {
                        @apply text-gray-900 mr-2 text-sm font-medium;
                    }

                    .mentions-listbox-item-id {
                        @apply text-gray-600 text-sm;
                    }
                }
            }
        }

        .markdown-editor-preview {
            @apply max-w-none pt-5 px-5 pb-1 break-words;
        }
    }

    &.markdown-write-mode {
        .toolbar {
            .mode-buttons {
                > .write-mode-button {
                    @apply text-blue-500 border-b-blue-500;
                }
            }

            .style-buttons {
                @apply flex;
            }
        }

        .markdown-editor-write {
            @apply flex;
        }

        .markdown-editor-preview {
            @apply hidden;
        }
    }

    &.markdown-preview-mode {
        .toolbar {
            .mode-buttons {
                > .preview-mode-button {
                    @apply text-blue-500 border-b-blue-500;
                }
            }

            .style-buttons {
                @apply hidden;
            }
        }

        .markdown-editor-write {
            @apply hidden;
        }

        .markdown-editor-preview {
            @apply prose max-w-none block;

            li {
                @apply m-0 leading-normal;
            }

            a {
                @apply text-blue-700 font-normal;
            }

            > * {
                @apply mb-4;
            }

            > p {
                @apply whitespace-pre-line leading-normal;
            }

            :first-child {
                @apply mt-0;
            }

            blockquote > p {
                @apply whitespace-pre-line leading-normal;

                &::after,
                &::before {
                    @apply content-none;
                }
            }

            img,
            svg,
            video,
            canvas,
            audio,
            iframe,
            embed,
            object {
                @apply inline m-0;
            }
        }
    }
}

.markdown-image-browser {
    @apply absolute bg-gray-800 bg-opacity-50 h-full left-0 top-0 w-full z-30 p-12;

    .browser-container {
        @apply flex flex-col bg-white divide-gray-300 divide-y h-full shadow-xl w-full rounded-lg;

        .browser-header {
            @apply shrink-0 flex justify-between px-5 py-4 text-gray-900;

            > span {
                @apply block font-medium;
            }

            > button {
                @apply leading-6 text-2xl;
            }
        }

        .browser-grid {
            @apply grow gap-4 grid grid-cols-6 p-4;

            .browser-grid-item {
                @apply flex flex-col h-56;

                > img {
                    @apply w-full h-full object-cover;
                }

                > div {
                    @apply mt-2 text-center text-gray-900 text-sm;
                }
            }
        }
    }
}