@config "../common.tailwind.config.js";
@import "icons.css";

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

@layer base {
    strong {
        @apply font-semibold;
    }
    pre > code {
        @apply grid;
    }
    code a {
        @apply !text-[#1976D2] dark:!text-[#E5C07B];
    }
    img {
        @apply max-w-none;
    }
}

@layer components {
    .link {
        @apply font-semibold text-blue transition-all hover:brightness-125 dark:text-blue-light;
    }
    .dark *[data-theme="light"] {
        @apply hidden;
    }
    .light *[data-theme="dark"] {
        @apply hidden;
    }
    .light .dark *[data-theme="dark"] {
        @apply block;
    }
    .light .shiki.one-dark-pro {
        @apply hidden;
    }
    .dark .shiki.github-light {
        @apply hidden;
    }
    .doc pre {
        @apply font-mono text-sm whitespace-pre-wrap leading-relaxed !bg-gray-100 dark:!bg-blue-darkest rounded-2xl mt-2 mb-4 overflow-x-auto;
    }
    .doc pre > code > pre {
        @apply p-0 m-0 rounded-none !bg-transparent;
    }
    .doc code {
        @apply whitespace-pre-wrap break-words;
    }
    .doc pre > code {
        @apply break-normal;
    }
    .doc a {
        @apply text-blue;
    }
    .doc code span.line:not(:last-of-type):after {
        content: "\200B"; /* useful to set correct height on empty lines */
    }
}

@layer utilities {
    .clip-path-corner-left {
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
    .clip-path-corner-right {
        clip-path: polygon(100% 0, 0 100%, 100% 100%);
    }
    .clip-path-triangle-bottom {
        clip-path: polygon(100% 100%, 100% 0%, 50% 100%, 0% 0%, 0% 100%);
    }
}
.light .DocSearch {
	--docsearch-modal-background: theme(colors.white);
	--docsearch-hit-background: theme(colors.gray.100);
}

.dark .DocSearch {
	--docsearch-modal-background: theme(colors.blue.black);
	--docsearch-text-color: theme(colors.blue.extralight);
	--docsearch-hit-color: theme(colors.gray.300);
	--docsearch-hit-background: theme(colors.blue.darkest);
}

body .DocSearch {
	--docsearch-highlight-color: theme(colors.blue.DEFAULT);
	--docsearch-primary-color: theme(colors.blue.DEFAULT);
	--docsearch-logo-color: theme(colors.blue.DEFAULT);
	--docsearch-key-gradient: "none";
	--docsearch-searchbox-shadow: "none";
}

body .DocSearch-Input {
    @apply focus-visible:outline-none;
}

body .DocSearch-Logo svg>* {
	@apply fill-blue;
}

body .DocSearch-SearchBar {
	@apply px-6 py-1 border-b-px border-b-gray-100 dark:border-b-blue-dark;
}

body .DocSearch-Form {
	@apply bg-transparent shadow-none px-0;
}

body .DocSearch-Hit-source {
	@apply text-lg text-blue-black py-2 dark:text-gray-50;
}

body .DocSearch-Dropdown {
	@apply px-0;
}

body .DocSearch-Button {
	@apply bg-white border-gray-200 border-solid border dark:border-none dark:bg-blue-black;
}

body .DocSearch-Modal {
	@apply w-full max-w-3xl shadow-2xl dark:shadow-inner-light;
}

body .DocSearch-Hits {
	@apply px-6 py-2 border-b-px border-b-gray-100 dark:border-b-blue-dark;
}

body .DocSearch-Hit a {
	@apply shadow-none;
}

body .DocSearch-Hit {
	@apply pb-2;
}

body .DocSearch-Footer {
	@apply bg-transparent dark:shadow-inner-light;
}

body kbd.DocSearch-Button-Key,
kbd.DocSearch-Commands-Key {
	@apply shadow-none w-5 h-5 p-0 border border-solid aspect-square rounded-md border-gray-400 bg-gray-100 text-gray-400 dark:bg-blue-dark;
}
