@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* This file is for your main application CSS */

/* https://stackoverflow.com/questions/77936984/scrollbar-with-white-background */
*::-webkit-scrollbar {
    width: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

*::-webkit-scrollbar-track {
    background-color: auto;
}

.dark *::-webkit-scrollbar-thumb {
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 4px;
}

emoji-picker {
    --border-radius: 8px;
}

.glitch-container-primary {
    @apply flex flex-col border border-indigo-200 rounded-lg dark:border-zinc-800;
}

.glitch-recordings-container {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 auto-rows-fr justify-items-center gap-4 p-4;
}

.glitch-live-dropping-container {
    @apply uppercase inline text-sm bg-red-600 p-1 px-2 text-xs text-white rounded-md font-medium tracking-[8%];
}

.glitch-dropping-featured-text {
    @apply text-indigo-800 font-medium dark:text-neutral-200;
}

.glitch-input-primary {
    @apply rounded-lg border border-indigo-200 disabled:bg-neutral-100 disabled:placeholder-neutral-300 text-sm flex-1 dark:bg-zinc-800 dark:disabled:bg-zinc-800 dark:disabled:placeholder-zinc-700 dark:border-zinc-800 dark:text-neutral-400;
}

.glitch-button-primary {
    @apply bg-indigo-800 disabled:bg-indigo-500 disabled:text-indigo-300 text-white px-12 py-2 rounded-lg text-sm font-medium;
}

.glitch-button-browser-all {
    @apply flex items-center justify-center gap-2 border border-indigo-200 rounded-lg w-full h-[44px] text-indigo-800 text-sm font-medium hover:bg-indigo-50 dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-stone-800;
}

.glitch-swm-video-watermark {
    @apply absolute top-6 right-6 pointer-events-none;
}

/* Markdown styling start */
.glitch-markdown ul,
.glitch-markdown ol {
    list-style: revert;
    margin: revert;
    padding: revert;
}

.glitch-markdown a,
#stream-viewer-title a {
    @apply underline;
}

.glitch-markdown blockquote {
    @apply border-l-4 border-zinc-300 pl-2 dark:border-zinc-700;
}

.glitch-markdown code,
#stream-viewer-title code {
    @apply border-[1px] rounded-md px-[2px] bg-zinc-50 border-zinc-300 dark:border-zinc-700 dark:bg-zinc-900;
}

.glitch-markdown pre,
#stream-viewer-title code {
    @apply border-[1px] rounded-md px-[2px] bg-zinc-50 border-zinc-300 dark:border-zinc-700 dark:bg-zinc-900;
}

.glitch-markdown pre code {
    @apply border-0 bg-transparent w-full break-all;
}

.glitch-markdown h1 {
    @apply text-2xl font-bold;
}

.glitch-markdown h2 {
    @apply text-xl font-bold;
}

.glitch-markdown h3 {
    @apply text-lg font-bold;
}

.glitch-markdown p {
    @apply mb-0 mt-0;
}

.glitch-markdown p+p {
    @apply mt-3;
}

/* Markdown styling end */
