@import './night-owl.css';

[wire\:key*="filament_tiptap_source"] {
    .fi-fo-component-ctn {
        height: 100%;

        > div {
            height: 100%;

            .fi-fo-field-wrp {
                height: 100%;

                > div {
                    height: 100%;
                    grid-template-rows: auto 1fr;

                    .source_code_editor * {
                        height: 100% !important;
                    }
                }
            }
        }
    }
}

.sorting .tiptap-wrapper {
    pointer-events: none;
}

.tiptap-wrapper.tiptap-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    height: 100%;

    .tiptap-toolbar {
        border-radius: 0;
    }

    .tiptap-prosemirror-wrapper {
        max-height: 100%;
        padding-block-end: 3rem;
    }
}

.tiptap-editor .tiptap-content {
    display: flex;
    flex-direction: column;
}

.tiptap-prosemirror-wrapper {
    word-break: break-word;
    overflow-wrap: break-word;
    &.prosemirror-w-sm { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.sm')) / 2)); }
    &.prosemirror-w-md { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.md')) / 2)); }
    &.prosemirror-w-lg { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.lg')) / 2)); }
    &.prosemirror-w-xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.xl')) / 2)); }
    &.prosemirror-w-2xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.2xl')) / 2)); }
    &.prosemirror-w-3xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.3xl')) / 2)); }
    &.prosemirror-w-4xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.4xl')) / 2)); }
    &.prosemirror-w-5xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.5xl')) / 2)); }
    &.prosemirror-w-6xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.6xl')) / 2)); }
    &.prosemirror-w-7xl { padding: 0 max(theme('padding.4'), calc((100% - theme('maxWidth.7xl')) / 2)); }
    &.prosemirror-w-none { padding: 0 theme('padding.4'); }
}

.tiptap-editor .ProseMirror {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    flex: 1 1 0;
    padding-block: 1rem;
    margin-inline: auto;
    position: relative;
    width: 100%;
    color: theme('colors.black');

    &.ProseMirror-focused .ProseMirror-selectednode {
        @apply outline-2 outline-offset-2 outline-dashed outline-gray-700 dark:outline-gray-300;
    }

    .tiptap-block-wrapper {
        @apply rounded-md overflow-hidden bg-gray-100 dark:bg-gray-800;

        .tiptap-block {
            .tiptap-block-heading {
                @apply flex items-center justify-between py-1 px-3 leading-none text-gray-900 bg-gray-200 dark:text-white dark:bg-gray-950;

                .tiptap-block-title {
                    @apply text-sm uppercase font-bold opacity-80;
                }
            }

            .tiptap-block-actions {
                @apply flex items-center gap-2;

                button {
                    @apply opacity-75 hover:opacity-100 focus:opacity-100 hover:text-primary-500 focus:text-primary-500;
                }
            }

            .preview {
                @apply p-4;
            }
        }
    }

    .filament-tiptap-hurdle {
        width: 100%;
        max-width: 100vw;
        padding-block: 1rem;
        background-color: theme('colors.gray.800');
        position: relative;

        &::before,
        &::after {
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            top: 0;
            bottom: 0;
            background-color: inherit;
        }

        &::before {
            left: -100%;
        }

        &::after {
            right: -100%;
        }

        &[data-color="gray_light"] {
            color: theme('colors.gray.900');
            background-color: theme('colors.gray.300');
        }

        &[data-color="gray"] {
            color: white;
            background-color: theme('colors.gray.500');
        }

        &[data-color="gray_dark"] {
            color: white;
            background-color: theme('colors.gray.800');
        }

        &[data-color="primary"] {
            color: theme('colors.gray.900');
            background-color: theme('colors.primary.500');
        }

        &[data-color="secondary"] {
            color: theme('colors.gray.900');
            background-color: theme('colors.warning.500');
        }

        &[data-color="tertiary"] {
            color: white;
            background-color: theme('colors.success.500');
        }

        &[data-color="accent"] {
            color: white;
            background-color: theme('colors.danger.500');
        }
    }

    &.ProseMirror-focused {
        outline: none;
    }

    > * + * {
        margin-block-start: 1rem;
    }

    > * + h1,
    > * + h2,
    > * + h3,
    > * + h4,
    > * + h5,
    > * + h6 {
        margin-block-start: 2rem;
    }

    img {
        display: inline-block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: bold;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 1.1;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.1;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    h4 {
        font-size: 1.125rem;
    }

    .lead {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    small {
        font-size: 0.75rem;
    }

    ul,
    ol {
        @apply space-y-2;
        padding-inline-start: 1rem;
        margin-inline-start: 1rem;
    }

    ul {
        list-style: disc;
    }

    ol {
        list-style: decimal;
    }

    ul.checked-list {
        list-style-type: none;
        margin-inline-start: 0;
    }

    ul.checked-list li {
        display: flex;
        align-items: baseline;
        gap: 0.375em;
    }

    ul.checked-list li::before {
        content: '✓';
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    blockquote {
        border-left: 0.25rem solid theme("colors.gray.400");
        padding-inline-start: 0.5rem;
        margin-inline-start: 1rem;
        font-size: 1.25rem;
    }

    hr {
        border-color: theme("colors.gray.400");
    }

    a {
        color: theme("colors.blue.600");
        text-decoration: underline;
    }

    a[id] {
        color: theme('colors.black');
        text-decoration: none;
        &::before {
            content: '# ';
            color: theme("colors.gray.500");
            opacity: 50;
        }
    }

    a[data-as-button="true"] {
        background-color: theme("colors.gray.900");
        color: white !important;
        text-decoration: none;
        display: inline-block;
        @apply rounded-md py-2 px-5;

        &[data-as-button-theme="primary"] {
            background-color: theme("colors.primary.600");
        }

        &[data-as-button-theme="secondary"] {
            background-color: theme("colors.warning.600");
        }

        &[data-as-button-theme="tertiary"] {
            background-color: theme("colors.success.600");
        }

        &[data-as-button-theme="accent"] {
            background-color: theme("colors.danger.600");
        }
    }

    sup {
        font-size: 65%;
    }

    img {
        border: dashed 2px transparent;

        &.ProseMirror-selectednode {
            border-radius: theme("borderRadius.DEFAULT");
            outline-offset: 2px;
            outline: theme("colors.gray.900") dashed 2px;
        }
    }

    table {
        border-collapse: collapse;
        margin: 0;
        overflow: hidden;
        table-layout: fixed;
        width: 100%;
        position: relative;
    }

    table td,
    table th {
        border: 1px solid theme("colors.gray.400");
        min-width: 1em;
        padding: 3px 5px;
        vertical-align: top;
        background-clip: padding-box
    }

    table td > *,
    table th > * {
        margin-bottom: 0;
    }

    table th {
        background-color: theme("colors.gray.200");
        color: theme("colors.gray.700");
        font-weight: 700;
        text-align: left;
    }

    table .selectedCell {
        position: relative;
    }

    table .selectedCell:after {
        background: rgba(200, 200, 255, 0.4);
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
        position: absolute;
        z-index: 2;
    }

    table .column-resize-handle {
        background-color: #adf;
        bottom: -2px;
        position: absolute;
        right: -2px;
        pointer-events: none;
        top: 0;
        width: 4px;
    }

    table p {
        margin: 0;
    }

    .tableWrapper {
        padding: 1rem 0;
        overflow-x: auto;
    }

    .resize-cursor {
        cursor: col-resize;
    }

    pre {
        padding: .75rem 1rem;
        border-radius: .25rem;
        font-size: .875rem;

        code {
            border-radius: 0;
            padding-inline: 0;
        }
    }

    code {
        background-color: theme("colors.gray.300");
        border-radius: 0.25rem;
        padding-inline: 0.25rem;
    }

     pre.hljs {
        direction: ltr;
        code {
            background-color: transparent;
        }
    }

    .filament-tiptap-grid,
    .filament-tiptap-grid-builder {
        display: grid;
        gap: 1rem;
        box-sizing: border-box;

        .filament-tiptap-grid__column,
        .filament-tiptap-grid-builder__column {
            box-sizing: border-box;
            border-style: dashed;
            border-width: 1px;
            border-color: theme("colors.gray.400");
            padding: 0.5rem;
            border-radius: theme("borderRadius.DEFAULT");

            > * + * {
                margin-block-start: 1rem;
            }
        }

        &.ProseMirror-selectednode {
            border-radius: theme("borderRadius.DEFAULT");
            outline-offset: 2px;
            outline: theme("colors.gray.900") dashed 2px;
        }
    }

    .filament-tiptap-grid[type^="asymetric"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    @media (max-width: theme('screens.sm')) {
        .filament-tiptap-grid-builder[data-stack-at="sm"] {
            grid-template-columns: 1fr !important;

            .filament-tiptap-grid-builder__column {
                grid-column: span 1 !important;
            }
        }
    }

    @media (max-width: theme('screens.md')) {
        .filament-tiptap-grid-builder[data-stack-at="md"] {
            grid-template-columns: 1fr !important;

            .filament-tiptap-grid-builder__column {
                grid-column: span 1 !important;
            }
        }
    }

    @media (max-width: theme('screens.lg')) {
        .filament-tiptap-grid-builder[data-stack-at="lg"] {
            grid-template-columns: 1fr !important;

            .filament-tiptap-grid-builder__column {
                grid-column: span 1 !important;
            }
        }
    }

    .filament-tiptap-grid[type="asymetric-right-thirds"] {
        @screen md {
            grid-template-columns: 1fr 2fr;
        }
    }

    .filament-tiptap-grid[type="asymetric-left-thirds"] {
        @screen md {
            grid-template-columns: 2fr 1fr;
        }
    }

    .filament-tiptap-grid[type="asymetric-right-fourths"] {
        @screen md {
            grid-template-columns: 1fr 3fr;
        }
    }

    .filament-tiptap-grid[type="asymetric-left-fourths"] {
        @screen md {
            grid-template-columns: 3fr 1fr;
        }
    }

    .filament-tiptap-grid[type="responsive"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        &[cols="2"] {
            @screen md {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        &[cols="3"] {
            @screen md {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        &[cols="4"] {
            @screen md {
                grid-template-columns: repeat(2, 1fr);
            }

            @screen lg {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        &[cols="5"] {
            @screen md {
                grid-template-columns: repeat(5, 1fr);
            }
        }
    }

    .filament-tiptap-grid[type="fixed"] {
        &[cols="2"] {
            grid-template-columns: repeat(2, 1fr);
        }

        &[cols="3"] {
            grid-template-columns: repeat(3, 1fr);
        }

        &[cols="4"] {
            grid-template-columns: repeat(4, 1fr);
        }

        &[cols="5"] {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    [data-youtube-video],
    [data-vimeo-video],
    [data-native-video] {
        border: dashed 1px transparent;

        &.ProseMirror-selectednode {
            border-radius: theme("borderRadius.DEFAULT");
            outline-offset: 2px;
            outline: theme("colors.gray.900") dashed 2px;
        }

        iframe,
        video {
            pointer-events: none;
        }
    }

    div[data-type="details"] {
        box-sizing: border-box;
        border-style: dashed;
        border-width: 1px;
        border-color: theme("colors.gray.400");
        border-radius: theme("borderRadius.DEFAULT");
        position: relative;

        summary {
            padding: 0.375rem 0.5rem;
            font-weight: 700;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: theme("colors.gray.200");

            &::marker {
                content: "";
                display: none;
            }
        }

        div[data-type="details-content"] {
            padding: 0.5rem;
            height: auto;

            > * + * {
                margin-block-start: 1rem;
            }
        }
    }
}

.dark {
    .tiptap-editor .ProseMirror {
        color: theme('colors.gray.200');

        blockquote {
            border-left-color: theme("colors.gray.500");
        }

        hr {
            border-color: theme("colors.gray.500");
        }

        a {
            color: theme("colors.blue.400");
        }

        a[id] {
            color: theme('colors.gray.200');
        }

        code {
            background-color: theme("colors.gray.800");
        }

        table td,
        table th {
            border-color: theme("colors.gray.600");
        }

        table th {
            background-color: theme("colors.gray.800");
            color: theme('colors.gray.100');
        }

        .filament-tiptap-grid {
            .filament-tiptap-grid__column {
                border-color: theme("colors.gray.500");
            }

            &.ProseMirror-selectednode {
                outline-color: theme("colors.gray.400");
            }
        }

        img.ProseMirror-selectednode {
            outline-color: theme("colors.gray.400");
        }

        [data-youtube-video],
        [data-vimeo-video],
        [data-native-video] {
            &.ProseMirror-selectednode {
                outline-color: theme("colors.gray.400");
            }
        }

        div[data-type="details"] {
            box-sizing: border-box;
            border-color: theme("colors.gray.500");
            border-radius: theme("borderRadius.DEFAULT");
            position: relative;

            summary {
                border-bottom-color: theme("colors.gray.500");
            }
        }
    }

    .tiptap-editor .ProseMirror-focused .ProseMirror-gapcursor:after {
        border-top: 1px solid white;
    }
}

.filament-tiptap-editor-source-modal textarea {
    font-family: theme("fontFamily.mono") monospace;
}

.tiptap-editor p.is-editor-empty:first-child::before,
.tiptap-wrapper .is-empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
    @apply text-gray-400 dark:text-gray-500;
}

.tippy-content-p-0 {
    @apply -mx-2 -my-1;
}

span[data-type="mergeTag"] {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 mx-1 rounded;
}

.tiptap-editor .mention  {
    @apply bg-primary-600 bg-opacity-10 text-primary-600 px-1 py-0.5 rounded-md box-decoration-clone;
}