
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html, body, #app {
        @apply h-full;
    }
    html {
        @apply bg-gray-bg text-gray-light cursor-default;
    }
    *:focus {
        @apply outline-none;
    }

    ::-webkit-scrollbar {
        @apply w-2 h-2;
    }
    ::-webkit-scrollbar-track {
        @apply bg-none;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-gray rounded-full;
    }

    hr {
        @apply border-t border-r border-gray/30 self-stretch h-auto;
    }
    input, textarea, select {
        @apply p-1 bg-gray-dark border border-gray/30 rounded-sm [color-scheme:dark];
    }
    label, button {
        @apply select-none;
    }

    .splitpanes--vertical > .splitpanes__splitter {
        @apply w-4;
    }
    .splitpanes--horizontal > .splitpanes__splitter {
        @apply h-4;
    }
    .splitpanes__pane {
        @apply !transition-none;
    }

    .monaco-editor {
        .diff-hidden-lines {
            @apply -translate-y-1.5 select-none;

            .center >:nth-child(2) {
                /* https://github.com/microsoft/vscode/issues/186406#issuecomment-1697642614 */
                @apply !items-stretch grow;

                :nth-child(1) {
                    @apply m-auto grow;
                }
                :not(:nth-child(1)) {
                    @apply !hidden;
                }
            }
        }
        .insert-sign, .delete-sign {
            @apply !opacity-100;

            &, & + .line-numbers {
                @apply text-gray-light;
            }
        }
        .insert-sign {
            &, & + .line-numbers {
                @apply bg-green/35;
            }
        }
        .delete-sign {
            &, & + .line-numbers {
                @apply bg-red/35;
            }
        }
        .suggest-widget {
            /* https://github.com/microsoft/monaco-editor/issues/1681 */
            @apply !hidden;
        }
        * {
            --vscode-editorLineNumber-activeForeground: var(--vscode-editorLineNumber-foreground);
        }
    }

    .vue-recycle-scroller__item-view {
        /* https://github.com/Akryum/vue-virtual-scroller/issues/118#issuecomment-670852864 */
        @apply !will-change-auto;
    }
}

@layer utilities {
    .row {
        @apply flex items-center gap-3 px-3 py-1;
    }
    .clickable {
        @apply cursor-pointer select-none hover:[&:not(.active)]:bg-accent/10;
    }
    .active {
        @apply text-accent bg-accent/15;
    }
    .ellipsis {
        @apply whitespace-nowrap overflow-hidden text-ellipsis;
    }
    .scrollbar-hidden::-webkit-scrollbar {
        @apply hidden;
    }
}
