@import 'variables';

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

@import 'nprogress';
@import "balloon-css/src/balloon";

.bf-blur {
    backdrop-filter: blur(2px) saturate(125%);
}

.bf-blur-high {
    backdrop-filter: blur(15px) saturate(125%);
}

.text-gradient {
    background: -webkit-linear-gradient(
            35deg,
            var(--color-primary),
            var(--color-success),
            var(--color-warning),
            var(--color-danger)
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme--dark {
    .prose {
        color: var(--text-medium-emphasis);
    }

    .vue-simplemde {
        .editor-toolbar {
            border-left: 1px solid var(--color-surface-3);
            border-top: 1px solid var(--color-surface-3);
            border-right: 1px solid var(--color-surface-3);

            .separator {
                border-left: 1px solid var(--color-surface-3);
                border-right: transparent;
            }

            a {
                color: var(--text-medium-emphasis) !important;
            }

            a:hover {
                background: var(--color-surface-3);
            }
        }

        .CodeMirror {
            background: var(--color-surface-1);
            color: var(--text-medium-emphasis);
            border: 1px solid var(--color-surface-3);
        }
    }
}
