@import './changelog.css';

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

body {
    font-family: "Cabin Variable", system-ui;
}

html {
    scroll-behavior: smooth;
}

.unset {
    inset: unset;
}

#documentation-examples ul {
    @apply list-disc pl-6;
}

.btn {
    @apply font-medium text-white dark:text-white py-1 px-2 rounded;
}

.btn-primary {
    @apply bg-blue-200 dark:bg-blue-100 hover:bg-blue-300 dark:hover:bg-blue-200;
}

.btn img {
    @apply inline-block;
}


nav a {
    @apply font-medium text-white dark:text-white hover:underline;
}

footer a {
    @apply font-medium text-white dark:text-white hover:underline;
}

a {
    font-weight: normal;
    @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
}

.link {
    font-weight: normal;
    @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
}

code {
    font-size: 0.9em;
}

#blog-post table {
    @apply w-auto min-w-[450px] table-auto mb-3 border-collapse border-2 border-gray;
}
#blog-post table th {
    @apply border border-gray p-2 text-left;
}

#blog-post table td {
    @apply border border-gray p-2;
}

#blog-post {
    @apply pb-5 px-2 sm:px-4 mx-auto max-w-screen-xl;
}

#blog-post hr, p, pre, ul, h2, h3 {
    @apply mb-3;
}

#blog-post pre {
    @apply rounded my-6 p-4 overflow-auto rounded border-gray border-2 relative shadow-2xl shadow-gray;
}

#blog-post pre code {
    @apply !p-0 !bg-transparent
}

#blog-post h1 {
    @apply font-bold text-4xl;
}

#blog-post ul {
    @apply list-disc pl-6;
}

#blog-post h2 {
    @apply font-bold text-2xl mt-4;
}

#blog-post h3 {
    @apply font-bold text-xl mt-4;
}


#blog-post hr {
    @apply text-blue-100 my-4 border-t-2 rounded;
}

#blog-post blockquote {
    @apply border-l-4 border-orange-100 p-2 bg-blue-300 mb-3;
}

#blog-post code {
    @apply text-orange-100;
}

#example-description h1 {
    @apply font-bold text-2xl;
}

#example-description h2 {
    @apply font-bold text-xl mt-4;
}

#example-description h1, h2, ul, hr, p {
    @apply mb-3;
}

#example-description ul {
    @apply list-disc pl-6;
}

#example-description hr {
    @apply text-blue-100 my-4 border-t-2 rounded;
}

#example-description code {
    @apply text-orange-100;
}


#documentation-page {
    @apply pb-5 px-2 sm:px-4 mx-auto max-w-screen-xl;
}

#documentation-page a {
    @apply inline;
}

#documentation-page table {
    @apply w-full table-auto mb-3 border-collapse border-2 border-gray;
}

#documentation-page th {
    @apply border border-gray p-2;
}

#documentation-page td {
    @apply border border-gray p-2;
}

#documentation-page hr, p, pre, ul, h2, h3 {
    @apply mb-3;
}

#documentation-page pre {
    @apply rounded my-6 p-4 overflow-auto rounded border-gray border-2 relative shadow-2xl shadow-gray;
}

#documentation-page pre code {
    @apply !p-0 !bg-transparent
}

#documentation-page h1 {
    @apply font-bold text-4xl;
}

#documentation-page ul {
    @apply list-disc pl-6;
}

#documentation-page h2 {
    @apply font-bold text-2xl mt-4;
}

#documentation-page hr {
    @apply text-blue-100 my-4 border-t-2 rounded;
}

#documentation-page h1 {
    @apply font-bold text-2xl;
}

#documentation-page h2 {
    @apply font-bold text-xl mt-4;
}

#documentation-page h1, h2, ul, hr, p {
    @apply mb-3;
}

#documentation-page ul {
    @apply list-disc pl-6;
}

#documentation-page hr {
    @apply text-blue-100 my-4 border-t-2 rounded;
}

#documentation-page code {
    @apply text-orange-100;
}

#documentation-page blockquote {
    @apply border-l-4 border-orange-100 p-2 bg-blue-300 mb-3;
}

.mermaid-wrapper {
    @apply relative;
}

.mermaid-wrapper .navigation {
    @apply absolute top-[36px] right-[4px] z-10;
}

.mermaid-wrapper .navigation button {
    @apply bg-orange-100 rounded-lg px-[12px] py-[6px] mr-2;
}

.mermaid-wrapper .navigation button:active {
    @apply bg-orange-200;
}

.mermaid-wrapper .navigation button img {
    @apply inline-block w-[16px] h-[16px];
}


.mermaid-wrapper .mermaid {
    @apply z-0 !p-0;
}
