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

table {
	margin: 20px;
}

th, td { 
		border-width: 1px;
		padding-left: 10px;
		padding-right: 10px;
}

.yt-video {
    height: 250px;
}

@media only screen and (min-width: 768px) {
	.yt-video {
		height: 350px;
	}
}

@media only screen and (min-width: 1024px) {
	.yt-video {
		height: 450px;
	}
}

@media only screen and (max-width: 1024px) {
	.collapse.collapsed {
		display: none;
	}
}

#TableOfContents > ul {
	@apply overflow-x-hidden font-medium text-gray-500 dark:text-gray-400;
}

#TableOfContents > ul > li {
	@apply py-2;
}

#TableOfContents > ul > li > a {
	@apply block pl-2.5 font-medium border-l border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-blue-700 dark:after:text-blue-500 dark:border-gray-900 dark:hover:border-gray-700 after:ml-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100;
}

#TableOfContents > ul > li > ul > li > a {
	@apply pl-6 border-l border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-blue-700 dark:after:text-blue-500 dark:border-gray-900 dark:hover:border-gray-700 after:ml-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100;
}

#TableOfContents > ul > li > ul {
	@apply pt-2;
}

#TableOfContents > ul > li > ul > li {
	@apply py-2;
}

#TableOfContents > ul > li > ul > li:last-of-type {
	@apply pb-0;
}

.highlight {
	@apply overflow-hidden;
}

#mainContent > h2 {
	@apply mt-8 mb-4 text-2xl font-semibold dark:text-white;
}

#mainContent > h3,
#mainContent > h4 {
	@apply mt-8 mb-4 text-xl font-semibold dark:text-white;
}

#mainContent > p {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

#mainContent > p > a,
#mainContent > ul > li > a,
#mainContent > ol > li > a,
#mainContent > ul > li > p > a,
#mainContent > ol > li > p > a {
	@apply font-medium text-gray-700 underline dark:text-gray-300 decoration-1 underline-offset-2 decoration-blue-600 dark:decoration-blue-500;
}

#mainContent > p > a:hover,
#mainContent > ul > li > a:hover,
#mainContent > ol > li > a:hover,
#mainContent > ul > li > p > a:hover,
#mainContent > ol > li > p > a:hover {
	@apply text-gray-900 decoration-2 dark:text-white;
}

#mainContent > p > code,
#mainContent > ul > li > code,
#mainContent > ol > li > code {
	@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400;
}

#mainContent > ul {
	list-style: disc;
	@apply pl-5 list-disc list-outside ul:list-revert ul:pl-6;
}

#mainContent > ol {
	list-style: decimal;
}

#mainContent p > strong {
	@apply text-gray-900 dark:text-white;
}

#mainContent > ul,
#mainContent > ol {
	padding-left: 1rem;
}

#mainContent > ul > li,
#mainContent > ol > li {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

/* Search */

.DocSearch-Button {
	@apply p-2 m-0 md:w-52 items-center justify-center focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:justify-between h-[40px] w-[40px] md:bg-gray-50 rounded-lg border md:border-gray-300 md:border-solid shadow-none xl:pl-4 flex hover:bg-gray-100 dark:focus:bg-gray-600 xl:w-64 hover:shadow-none focus:shadow-none dark:md:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600;
}

.DocSearch-Button-Placeholder {
	@apply text-sm font-normal text-gray-500 dark:text-gray-400;
}

.DocSearch-Search-Icon {
	@apply w-4 h-4 md:w-3 md:h-3 md:mr-1 text-transparent !important;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236A7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
}

.dark .DocSearch-Search-Icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%239BA3AF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
}

.DocSearch-Button-Keys {
	@apply items-center min-w-0;
}

.DocSearch-Button-Key:first-child {
  @apply mr-px text-base;
}

.DocSearch-Button-Key {
	@apply w-auto pt-1 pb-0 m-0 text-xs font-normal text-gray-500 shadow-none bg-none dark:text-gray-400;
}

.DocSearch-Button .DocSearch-Search-Icon {
	@apply text-gray-500;
}

.DocSearch-Hit-icon {
	@apply hidden;
}

.DocSearch-Hits mark {
	@apply text-blue-600 dark:text-white decoration-2 underline-offset-2 decoration-blue-600 dark:decoration-white;
}

.DocSearch-Hit[aria-selected=true] a {
	@apply bg-blue-700 dark:bg-blue-600;
}

.DocSearch-Hit-source {
	@apply pb-1 text-gray-700 bg-white dark:bg-gray-700 dark:text-gray-400;
}

.DocSearch-Container {
	@apply bg-gray-900/50 dark:bg-gray-900/80;
}

.DocSearch-Modal {
	@apply mx-auto mt-[1rem] max-h-[calc(100vh-2rem)] w-full max-w-[calc(100vw-2rem)] overflow-hidden shadow-none rounded-lg lg:mt-[4rem] lg:max-h-none lg:max-w-xl;
}

.DocSearch-SearchBar {
	@apply p-0 border-b border-gray-100 dark:border-gray-600 dark:bg-gray-700;
}

.DocSearch-Form {
	@apply shadow-none dark:bg-gray-700;
}

.DocSearch-Input {
	@apply text-sm text-gray-500 shadow-none dark:text-white focus:shadow-none focus:ring-0 dark:bg-gray-700;
}

.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
	@apply w-4 h-4;
}

.DocSearch-Commands {
	@apply hidden;
}

.DocSearch-Footer {
	@apply h-12 border-t border-gray-100 shadow-none dark:bg-gray-700 dark:border-gray-600;
}

.DocSearch-Dropdown {
	@apply bg-white dark:bg-gray-700;
}

.DocSearch-Hit {
	@apply pb-2 shadow-none;
}

.DocSearch-Hit a {
	@apply rounded-lg shadow-none bg-gray-50 dark:bg-gray-600 dark:hover:bg-blue-600;
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon,
.DocSearch-Hit-action-button {
	@apply hidden;
}

.DocSearch-Hit .DocSearch-Hit-action:last-child {
	@apply w-5 h-5;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action:last-child {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Screen-Icon,
.DocSearch-NoResults-Prefill-List,
.DocSearch-Cancel {
	@apply hidden;
}

.DocSearch-Title {
	@apply mb-1 text-lg font-normal text-gray-700 dark:text-gray-200;
}

.DocSearch-Hit-Container {
	@apply dark:text-gray-300;
}

.DocSearch-Logo svg {
	@apply dark:text-gray-400;
}

.DocSearch-Reset {
	@apply dark:text-gray-300 dark:hover:text-white hover:text-black;
}

blockquote, table {
	@apply dark:text-gray-400
}

blockquote {
	@apply ml-4 pl-4 border-l-4 border-gray-300 dark:border-gray-600;
}