app.css

@layer base {
	strong {
		@apply font-semibold;
	}

	html.dark {
		--scrollbarBG: #020011;
		--thumbBG: #374151;
	}
	.dark *::-webkit-scrollbar {
		width: 11px;
		height: 11px;
	}
	.dark * {
		scrollbar-width: thin;
		scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	}

	.dark input,
	.dark textarea,
	.dark [contenteditable] {
		caret-color: white !important;
	}

	.dark *::-webkit-scrollbar-track {
		background: var(--scrollbarBG);
	}
	.dark *::-webkit-scrollbar-thumb {
		background-color: var(--thumbBG);
		border-radius: 6px;
		border: 3px solid var(--scrollbarBG);
	}
	/* .dark input:-internal-autofill-selected {
		@apply bg-gray-925;
	} */
	.dark .bg-white {
		@apply bg-gray-950;
	}
	.dark .text-black {
		@apply text-gray-200;
	}
	.dark .text-gray-900 {
		@apply text-gray-200;
	}
	.dark .text-gray-800 {
		@apply text-gray-300;
	}
	.dark .text-gray-700 {
		@apply text-gray-300;
	}
	.dark .text-gray-600 {
		@apply text-gray-350;
	}
	.dark .text-gray-500 {
		@apply text-gray-400;
	}
	.dark .border-gray-200,
	.dark .border-gray-100,
	.dark .border,
	.dark .border-t,
	.dark .border-r,
	.dark .border-b,
	.dark .border-l {
		@apply border-gray-850;
	}
}

@layer components {
	.btn,
	.btn-widget {
		@apply inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-lg border bg-gradient-to-b  px-3 py-1 focus:outline-none focus:ring;
	}
	.btn {
		@apply border-gray-200 from-white to-gray-100 text-gray-800 hover:shadow-inner dark:border-gray-850 dark:from-gray-800 dark:to-gray-950 dark:text-gray-200 dark:hover:from-gray-700;
	}
	.btn-widget {
		@apply h-8 from-gray-50 to-gray-200 hover:from-gray-100 dark:border-gray-850 dark:from-gray-800 dark:to-gray-950 dark:hover:from-gray-700;
	}
	.btn-green {
		@apply inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-lg border border-green-500  bg-green-500 px-3 py-1 text-white hover:shadow-inner focus:outline-none focus:ring dark:border-gray-850 dark:from-gray-800 dark:to-gray-950 dark:text-gray-200 dark:hover:from-gray-700;
	}
	.btn-pink {
		@apply inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-lg border border-red-400  bg-red-400 px-3 py-1 text-white hover:shadow-inner focus:outline-none focus:ring dark:border-gray-850 dark:from-gray-800 dark:to-gray-950 dark:text-gray-200 dark:hover:from-gray-700;
	}
	.btn:disabled,
	.btn-widget:disabled {
		@apply cursor-not-allowed opacity-50;
	}
	.btn.btn-lg {
		@apply px-4 py-1.5 font-normal;
	}
	.btn-green-lg {
		@apply px-10 py-2;
	}
	.overview-card-wrapper {
		@apply from-gray-50-to-white rounded-lg border border-gray-100 bg-gradient-to-r via-white text-base shadow-sm hover:via-gray-50 hover:to-gray-100 dark:border-gray-850 dark:via-gray-950 dark:hover:from-gray-950 dark:hover:via-gray-925 dark:hover:to-gray-925;
	}
	.overview-card-wrapper.white {
		@apply from-white dark:from-gray-925;
	}
	.tab {
		@apply -mb-px flex cursor-pointer select-none items-center border-r border-gray-200 px-4 text-center;
	}
	.tab:not(.active) {
		@apply hover:text-gray-700;
	}
	.tab.active {
		@apply flex items-center border-r border-gray-200 bg-white px-4 text-center font-semibold;
	}
	.tab-alternate {
		@apply flex h-full items-center whitespace-nowrap border-b-2 border-transparent px-2.5 font-medium text-gray-600 dark:text-gray-400 sm:px-3.5;
	}
	.tab-alternate:not(.active) {
		@apply hover:border-gray-200 dark:hover:border-gray-800;
	}
	.tab-alternate.active {
		@apply border-gray-700 font-semibold text-gray-800 dark:border-gray-400;
	}
	.tag {
		@apply mb-1 mr-1 inline-flex h-7 max-w-full flex-none items-center overflow-hidden truncate rounded-lg border border-transparent bg-gradient-to-b text-sm dark:border-gray-850 md:mb-1.5 md:mr-1.5;
	}
	.tag > span {
		@apply px-2;
	}
	.tag.inactive {
		@apply filter-grayscale opacity-50;
	}
	.tag-blue {
		@apply from-blue-50 to-blue-50 text-blue-800 hover:to-blue-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-ghost {
		@apply from-transparent to-transparent text-gray-400 hover:from-gray-100 hover:to-gray-100 hover:text-gray-600;
	}
	.tag-green {
		@apply from-green-50 to-green-50 text-green-800 hover:to-green-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-indigo {
		@apply from-indigo-50 to-indigo-50 text-indigo-800 hover:to-indigo-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-orange {
		@apply from-orange-50 to-orange-50 text-orange-800 hover:to-orange-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-purple {
		@apply from-purple-50 to-purple-50 text-purple-800 hover:to-purple-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-red {
		@apply from-red-50 to-red-50 text-red-800 hover:to-red-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-yellow {
		@apply from-yellow-50 text-yellow-800 hover:to-yellow-100 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-white {
		@apply border-gray-100 from-white to-white text-gray-700 hover:to-gray-100 dark:border-gray-850 dark:from-gray-925 dark:to-gray-925 dark:text-gray-300 dark:hover:to-gray-800;
	}
	.tag-ico {
		@apply flex h-7 w-8 flex-none items-center bg-gradient-to-t to-white pl-2 dark:to-gray-950;
	}
	.tag-close-ico {
		@apply -ml-1.5 mr-1.5 mt-0.5;
	}
	.tag-ico-blue {
		@apply from-blue-50 text-blue-500 dark:from-gray-925;
	}
	.tag-ico-green {
		@apply from-green-50 text-green-500 dark:from-gray-925;
	}
	.tag-ico-indigo {
		@apply from-indigo-50 text-indigo-500 dark:from-gray-925;
	}
	.tag-ico-orange {
		@apply from-orange-50 text-orange-500 dark:from-gray-925;
	}
	.tag-ico-purple {
		@apply from-purple-50 text-purple-500 dark:from-gray-925;
	}
	.tag-ico-red {
		@apply from-red-50 text-red-500 dark:from-gray-925;
	}
	.tag-ico-yellow {
		@apply from-yellow-50 text-yellow-500 dark:from-gray-925;
	}
	.form-input:not([type="checkbox"]) {
		@apply border-2 border-gray-200 placeholder-gray-400 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-950;
	}
	.form-input:not([type="radio"]):not([type="checkbox"]) {
		@apply mt-1 block w-full rounded-md;
	}
	.form-input[type="radio"] {
		@apply mr-1.5 mt-2 h-3.5 w-3.5;
	}
	.form-input[type="checkbox"] {
		@apply rounded border-transparent bg-gray-200 text-blue-500 focus:border-transparent  focus:ring-1 focus:ring-gray-200 focus:ring-offset-2;
	}
	.form-input[type="checkbox"]:checked {
		@apply bg-blue-500;
	}
	.form-input:disabled {
		@apply cursor-not-allowed opacity-50;
	}
	.form-input-alt {
		@apply h-10 rounded-lg border border-gray-200 px-3 placeholder-gray-400 shadow-inner outline-none focus:shadow-inner focus:ring-1 focus:ring-inset focus:ring-indigo-200 dark:border-gray-850 dark:bg-gray-925 dark:focus:ring-indigo-50;
	}
}

@layer utilities {
	@variants hover, focus {
		.filter-none {
			filter: none;
		}
		.filter-grayscale {
			filter: grayscale(100%);
		}
		.shadow-alternate-sm {
			box-shadow:
				0px 5px 5px rgba(0, 0, 0, 0.03),
				0px 2px 2px rgba(0, 0, 0, 0.03),
				0px 0px 1px rgba(0, 0, 0, 0.03);
		}
		.shadow-alternate {
			box-shadow:
				0px 10px 20px rgba(0, 0, 0, 0.04),
				0px 2px 6px rgba(0, 0, 0, 0.04),
				0px 0px 1px rgba(0, 0, 0, 0.04);
		}
		.shadow-alternate-xl {
			box-shadow:
				0px 24px 32px rgba(0, 0, 0, 0.04),
				0px 16px 24px rgba(0, 0, 0, 0.04),
				0px 4px 8px rgba(0, 0, 0, 0.04),
				0px 0px 1px rgba(0, 0, 0, 0.04);
		}
	}
	@variants responsive {
		.from-gray-50-to-white {
			@apply from-gray-50 to-white dark:from-gray-925 dark:to-gray-950;
		}

		.from-gray-100-to-white {
			@apply from-gray-100 to-white dark:from-gray-925 dark:to-gray-925;
		}
	}
	.scroll-smooth {
		scroll-behavior: smooth;
	}
}

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

/** Prose **/

.prose iframe {
	@apply my-10 overflow-hidden rounded-lg;
}

.prose .course-tip {
	@apply relative mb-3 mt-10 px-5 py-3.5 before:absolute before:inset-y-0 before:left-0 before:border-l-2;
}

.prose .course-tip p {
	@apply !m-0;
}

.prose code {
	@apply font-normal;
	direction: ltr;
}

.prose code,
.prose strong {
	@apply text-gray-800;
	direction: ltr;
}

.prose .course-tip code,
.prose .course-tip a {
	@apply text-green-800 dark:text-green-600;
	direction: ltr;
}

.prose .course-tip.course-tip-orange code,
.prose .course-tip.course-tip-orange a {
	@apply text-orange-800 dark:text-orange-600;
	direction: ltr;
}

.prose .course-tip ul {
	@apply last:mb-0;
}

/* Remove the ticks from prose class everywhere */
.prose code::after,
.prose code::before {
	content: "";
}

/* Prose Doc */

.prose.prose-doc iframe {
	@apply max-w-full;
}

.prose.prose-doc .course-tip {
	@apply mt-6;
}

.prose.prose-doc .code-block {
	@apply -mx-3 text-smd md:mx-0 md:text-base;
	direction: ltr;
}

.prose.prose-doc .code-block pre {
	@apply border border-gray-100;
	direction: ltr;
}

.prose.prose-doc > p > em {
	@apply text-gray-500;
}

.prose.prose-doc h1 {
	@apply text-2xl text-gray-900;
}

.prose.prose-doc h2 {
	@apply text-xl text-gray-800;
}

.prose.prose-doc h3 {
	@apply text-lg text-gray-800;
}

.prose.prose-doc h5 {
	@apply font-semibold text-gray-800;
}

.prose .prose.prose-doc p {
	@apply my-7;
}

.prose.prose-doc img {
	@apply !max-w-full xl:!max-w-xl;
}

.prose.prose-doc img[src^="https://img.shields.io/"]
{
	@apply m-0 mb-1;
}

.prose.prose-doc table {
	@apply block overflow-auto;
}

.prose.prose-doc .language-select pre:first-of-type {
	@apply !mt-1;
}

/* Prose Doc Docstring */

#docstring-tooltip code {
	@apply text-sm;
}

.prose.prose-doc .docstring .course-tip {
	@apply my-6 text-base;
}

.prose.prose-doc > .docstring pre {
	@apply last:mb-6;
}

.prose.prose-doc .docstring *,
.prose.prose-doc .docstring * pre {
	@apply last:mb-0;
}

.prose.prose-doc .comma:not(:empty) ~ .comma:not(:empty):before {
	content: ", ";
}

.prose.prose-doc .colab-dropdown ul {
	@apply m-0;
}

.prose.prose-doc .colab-dropdown ul > li {
	@apply m-0 p-0;
}

.prose.prose-doc .colab-dropdown ul > li::before {
	@apply hidden;
}

.prose.prose-doc .hljs-meta {
	@apply select-none;
}

.prose.prose-doc table img {
	@apply !m-0;
}

/** Prose Course **/

.prose.prose-course h1 {
	@apply font-bold;
}

.prose.prose-course pre {
	@apply border border-gray-100 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-950;
}

.prose.prose-course p {
	@apply md:mb-8;
}

.direction-rtl {
	direction: rtl;
}