@import "github-markdown-css/github-markdown-light";
@import './catppuccin-latte';


.dark {
    @import "github-markdown-css/github-markdown-dark";
    @import './catppuccin-macchiato';
}

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

@config "./tailwind-embed.config.js";

.html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-variation-settings: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

ol, ul {
    list-style: revert;
}

.code {
    font-family: Menlo, Consolas, Liberation Mono, monospace;
}

.code .line-num {
    width: 4%;
    text-align: right;
}

.code td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.code tbody {
    line-height: 18.2px;
}

.line-code {
    @apply pl-2;
    background: none !important;
}

.line-num {
    @apply cursor-pointer text-slate-600 dark:text-slate-400 hover:text-black dark:hover:text-white;
}

table.csv-table {
    @apply w-full whitespace-pre text-xs text-slate-300;
}

table.csv-table thead {
    text-align: left;
}

table.csv-table thead tr {
    @apply bg-slate-100 dark:bg-slate-800;
}

table.csv-table tbody tr {
    @apply bg-gray-500 dark:bg-gray-900;
}

table.csv-table thead tr th {
    @apply border py-2 px-1 border-slate-300 dark:border-slate-700;
}

table.csv-table tbody td {
    @apply border py-1.5 px-1 border-slate-200 dark:border-slate-800;
}

dl.dl-config {
    @apply grid grid-cols-3 text-sm;
}

dl.dl-config dt {
    @apply col-span-1 text-gray-700 dark:text-slate-300 font-bold;
}

dl.dl-config dd {
    @apply ml-1 col-span-2 break-words;
}

.markdown-body {
    @apply dark:bg-gray-900;
}

.markdown-body pre {
    @apply flex relative items-start p-0;
}

.markdown-body .code-div {
    @apply p-4 max-w-full overflow-x-auto;
}

.markdown-body code {
    @apply overflow-auto whitespace-pre;
}

.markdown-body img {
    @apply bg-transparent dark:bg-transparent;
}

.chroma.preview.markdown pre code {
    @apply p-4;
}