.fi-fo-rich-editor {
    & .fi-fo-rich-editor-uploading-file {
        @apply pointer-events-none cursor-wait opacity-50;
    }

    & .fi-fo-rich-editor-toolbar {
        @apply relative flex flex-wrap gap-x-3 gap-y-1 border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
    }

    & .fi-fo-rich-editor-floating-toolbar {
        @apply invisible absolute z-[20] -mt-1 flex flex-wrap gap-x-3 gap-y-1 rounded-lg border border-gray-300 bg-white p-1 shadow dark:border-gray-600 dark:bg-gray-800;
    }

    & .fi-fo-rich-editor-toolbar-group {
        @apply flex gap-x-1;
    }

    & .fi-fo-rich-editor-tool {
        @apply flex h-8 min-w-8 items-center justify-center rounded-lg text-sm font-semibold text-gray-700 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;

        &[disabled] {
            @apply pointer-events-none cursor-default opacity-70;
        }

        &.fi-active {
            @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
        }
    }

    & .fi-fo-rich-editor-uploading-file-message {
        @apply flex items-center gap-x-3 border-b border-gray-200 bg-gray-50 px-5 py-1.5 text-sm leading-6 font-medium text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-200;

        & .fi-loading-indicator {
            @apply text-gray-400 dark:text-gray-500;
        }
    }

    & .fi-fo-rich-editor-file-validation-message {
        @apply border-danger-200 bg-danger-50 text-danger-700 dark:text-danger-200 flex items-center gap-x-3 border-b px-5 py-1.5 text-sm leading-6 font-medium dark:border-white/10 dark:bg-white/5;
    }

    & .fi-fo-rich-editor-main {
        @apply flex flex-col-reverse;
    }

    & .fi-fo-rich-editor-content {
        @apply min-h-12 w-full flex-1 px-5 py-3;
    }

    & span[data-type='mergeTag'] {
        &::before {
            @apply me-1 font-normal opacity-60;
            content: '{{';
        }

        &::after {
            @apply ms-1 font-normal opacity-60;
            content: '}}';
        }
    }

    & .fi-fo-rich-editor-panels {
        @apply w-full border-b border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-900/30;
    }

    & .fi-fo-rich-editor-panel-header {
        @apply flex items-start gap-3 px-4 py-3;
    }

    & .fi-fo-rich-editor-panel-heading {
        @apply flex-1 text-sm font-semibold text-gray-950 dark:text-white;
    }

    & .fi-fo-rich-editor-panel-close-btn-ctn {
        @apply shrink-0;
    }

    & .fi-fo-rich-editor-panel {
        @apply grid divide-y divide-gray-200 dark:divide-white/10;
    }

    & .fi-fo-rich-editor-merge-tags-list {
        @apply flex flex-wrap gap-2 px-4 py-3;
    }

    & .fi-fo-rich-editor-merge-tag-btn {
        @apply cursor-move rounded-lg bg-white p-1 text-start text-sm text-gray-600 ring-1 ring-gray-600/10 dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
    }

    & .fi-fo-rich-editor-custom-blocks-list {
        @apply flex flex-wrap gap-2 px-4 py-3;
    }

    & .fi-fo-rich-editor-custom-block-btn {
        @apply flex cursor-move gap-1.5 rounded-lg bg-white px-2 py-1 text-start text-sm text-gray-600 ring-1 ring-gray-600/10 dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
    }

    & .tiptap {
        @apply h-full;

        &:focus {
            @apply outline-none;

            & .ProseMirror-selectednode {
                div&[data-type='customBlock'],
                img& {
                    @apply ring-primary-600 dark:ring-primary-500 ring-2;
                }
            }
        }

        & p.is-editor-empty:first-child {
            &::before {
                @apply pointer-events-none float-start h-0 text-gray-400;
                content: attr(data-placeholder);
            }

            @variant dark {
                &::before {
                    @apply text-gray-500;
                }
            }
        }

        & [data-type='details'] {
            @apply my-6 flex gap-1 rounded-md border border-gray-950/20 p-4 dark:border-white/20;

            & > div:first-of-type {
                @apply !mt-0;
            }

            & summary {
                @apply list-none font-medium;
            }

            & > button {
                @apply mt-px mr-2 flex size-5 items-center justify-center rounded-md bg-transparent p-1 text-xs leading-none hover:bg-gray-950/5 dark:hover:bg-white/5;

                &::before {
                    content: '\25B6';
                }
            }

            &.is-open > button::before {
                transform: rotate(90deg);
            }

            & > div {
                @apply flex w-full flex-col gap-4;

                & > [data-type='detailsContent'] {
                    @apply !mt-0;

                    & > :last-child {
                        @apply mb-4;
                    }
                }
            }
        }

        & table {
            @apply m-0 w-full table-fixed border-collapse overflow-hidden first:mt-0;

            & td,
            & th {
                @apply relative min-w-[1em] border border-gray-300 !p-2 align-top dark:border-gray-600;

                & > * {
                    @apply mb-0;
                }
            }

            & th {
                @apply bg-gray-100 text-start font-bold dark:bg-gray-800 dark:text-white;
            }

            & .selectedCell {
                &::after {
                    @apply pointer-events-none absolute start-0 end-0 top-0 bottom-0 z-2 bg-gray-200/80 content-[''];
                }

                @variant dark {
                    &::after {
                        @apply bg-gray-800/80;
                    }
                }
            }

            & .column-resize-handle {
                @apply bg-primary-600 pointer-events-none absolute end-0 top-0 bottom-0 !m-0 w-1;
            }
        }

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

        &.resize-cursor {
            @apply cursor-col-resize cursor-ew-resize;
        }

        & .grid-layout > .grid-layout-col {
            @apply rounded-md border border-gray-950/20 p-4 dark:border-white/20;
        }
    }

    & img {
        @apply inline-block;
    }

    & div[data-type='customBlock'] {
        @apply grid divide-y divide-gray-200 overflow-hidden rounded-lg shadow-sm ring-1 ring-gray-950/10 dark:divide-white/10 dark:ring-white/20;
    }

    & .fi-fo-rich-editor-custom-block-header {
        @apply flex items-start gap-3 bg-gray-50 px-4 py-3 dark:bg-gray-900/30;
    }

    & .fi-fo-rich-editor-custom-block-heading {
        @apply flex-1 text-sm font-semibold text-gray-950 dark:text-white;
    }

    & .fi-fo-rich-editor-custom-block-edit-btn-ctn {
        @apply shrink-0;
    }

    & .fi-fo-rich-editor-custom-block-delete-btn-ctn {
        @apply shrink-0;
    }

    & .fi-fo-rich-editor-custom-block-preview {
        @apply px-4 py-3;
    }

    @supports (container-type: inline-size) {
        @apply @container;

        & .fi-fo-rich-editor-main {
            @apply @2xl:flex-row;
        }

        & .fi-fo-rich-editor-panels {
            @apply @2xl:max-w-3xs @2xl:rounded-ee-lg @2xl:border-s @2xl:border-b-0;
        }
    }

    @supports not (container-type: inline-size) {
        & .fi-fo-rich-editor-main {
            @apply md:flex-row;
        }

        & .fi-fo-rich-editor-panels {
            @apply md:max-w-3xs md:rounded-ee-lg md:border-s md:border-b-0;
        }
    }
}

& .fi-fo-rich-editor-text-color-select-option {
    @apply flex items-center gap-2;

    & .fi-fo-rich-editor-text-color-select-option-preview {
        @apply h-5 w-5 shrink-0 rounded-full bg-(--color) dark:bg-(--dark-color);
    }
}