:root {
    --mason-primary: #0ea5e9;
}

.mason-wrapper {
    .mason-input-wrapper {
        @apply overflow-hidden;

        .fi-input-wrp-input {
            @apply flex max-h-[40rem];

            .mason-editor-wrapper {
                @apply flex-1;

                .mason-editor {
                    @apply min-h-full overflow-y-auto flex-1 h-full;

                    .tiptap {
                        @apply min-h-full;

                        p.is-empty {
                           @apply h-0;

                            &:first-child {
                                @apply py-1 px-2 h-auto;

                                &::before {
                                    @apply text-gray-400 dark:text-gray-600;
                                    content: attr(data-placeholder);
                                    float: left;
                                    height: 0;
                                    pointer-events: none;
                                }
                            }
                        }

                        [data-mason-brick] {
                            min-height: 2rem;

                            .mason-brick-loader {
                                @apply animate-spin m-4 h-5 w-5 text-gray-950 dark:text-white;

                                circle {
                                    @apply opacity-25;
                                }

                                path {
                                    @apply opacity-75;
                                }
                            }

                            .mason-brick-rendered {
                                @apply cursor-grab;

                                * {
                                    @apply pointer-events-none;
                                }
                            }

                            .mason-brick-controls {
                                @apply hidden transition absolute p-1 rounded-bl-md items-center bg-gray-700 dark:bg-gray-950;
                                z-index: 1;
                                top: 2px;
                                right: 2px;

                                button {
                                    @apply text-white block rounded p-1 hover:text-primary-500 hover:bg-gray-800;

                                    svg {
                                        @apply w-6 h-6 lg:w-4 lg:h-4;
                                    }

                                    &:disabled {
                                        @apply opacity-50;
                                    }
                                }

                                button.no-values {
                                    @apply hidden;
                                }
                            }

                            &:first-of-type {
                                [data-move-up-button] {
                                    @apply hidden;
                                }
                            }

                            &:last-of-type {
                                [data-move-down-button] {
                                    @apply hidden;
                                }
                            }

                            [data-delete-brick-button] {
                                @apply text-danger-400 dark:text-danger-400;
                            }
                        }
                    }
                }
            }

            .mason-sidebar {
                @apply hidden shrink-0 divide-y divide-gray-950/10 max-w-[12rem] md:flex flex-col h-full border-s border-gray-950/10 bg-gray-50 dark:border-white/5 dark:bg-gray-950/20 dark:divide-white/5;

                .mason-controls,
                .mason-actions-search,
                .mason-actions-bricks {
                    @apply p-2 gap-2;
                }

                .mason-controls {
                    @apply flex items-center;

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

                    .active {
                        @apply text-primary-600 dark:text-primary-500;
                    }
                }

                .mason-actions {
                    @apply overflow-hidden flex-1 flex flex-col divide-y divide-gray-950/10 dark:divide-white/5;

                    .mason-actions-bricks {
                        @apply flex-1 overflow-y-auto flex flex-col gap-2;

                        .mason-actions-brick {
                            @apply cursor-move flex items-center gap-2 rounded border text-xs ps-3 pe-4 py-2 bg-white dark:bg-gray-800 dark:border-gray-700;

                            &.filtered {
                                display: none !important;
                            }
                        }
                    }
                }
            }
        }

        &.sidebar-start .fi-input-wrp-input {
            @apply flex-row-reverse;
        }
    }

    &.is-focused {
        .ProseMirror-selectednode {
            outline-offset: -4px;
            outline: var(--mason-primary) solid 4px;

            .mason-brick-controls {
                @apply !flex;
            }
        }
    }

    &.fullscreen {
        @apply fixed inset-0 bg-white dark:bg-gray-900 z-20;

        .mason-input-wrapper {
            @apply h-full rounded-none;

            .fi-input-wrp-input {
                @apply max-h-full;
            }
        }

        .mason-editor {
            container-type: inline-size;
        }
    }

    &.display-mobile,
    &.display-tablet {
        @apply bg-gray-100 dark:bg-gray-950;

        .mason-editor-wrapper {
            @apply p-6;
        }

        .mason-editor-wrapper .mason-editor {
            @apply bg-white dark:bg-gray-900;
        }
    }

    &.display-mobile {
        .mason-editor-wrapper .mason-editor {
            @apply mx-auto;
            max-width: 392px !important;
        }
    }

    &.display-tablet {
        .mason-editor-wrapper .mason-editor {
            @apply mx-auto !max-w-screen-md;
        }
    }
}


