@use 'sass:selector';
@import './bs-customTheme';
@import './custom-darkCSS.variables';
// @mixin onlyInMode($mode) {
// 	@at-root #{selector.nest('[data-bs-theme="#{$mode}"]', &)} {
// 		@content;
// 	}
// }

body {
	min-height: 100vh;
}

main {
	display: flex;
	flex-wrap: nowrap;
}

.card {
	color: $primary;
	background-color: $light;
}

.agnos-ui {
	padding: 0;
}
.agnos-ui-logo {
	height: 30px;
}

// TODO use color of the color palette
.hljs-keyword {
	color: #d33948 !important;
}
.hljs-built_in {
	color: #bf5308 !important;
}
.hljs-symbol {
	color: #d33948 !important;
}
.hljs-variable {
	color: #d33948 !important;
}

.demo-sample {
	width: 100%;
}

h1,
.h1 {
	font-size: calc(2.125rem + 0.6vw);
}

h2,
.h2 {
	font-size: calc(1.325rem + 0.6vw);
}

h3,
.h3 {
	font-size: calc(1.3rem + 0.4vw);
}

h5,
.h5 {
	font-size: calc(0.8rem + 0.4vw);
}

.nav-link.active {
	font-weight: 600;
}

.nav-link.au-nav-link-onlightbg:not(.active) {
	@extend .text-bg-light;
}

.au-rounded-header {
	@media (min-width: 768px) {
		border-top-left-radius: 5px;
	}
	@media (min-width: 992px) {
		border-top-right-radius: 5px;
	}
}

.au-rounded {
	@media (min-width: 768px) {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	@media (min-width: 1292px) {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}

header {
	&.title {
		margin-left: calc(var(--bs-gutter-x) * -0.5);
		margin-right: calc(var(--bs-gutter-x) * -0.5);
		position: relative;

		.content-tabset {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.nav-link {
				border-style: solid;
				border-width: 3px 1px 1px;
				border-radius: 3px 3px 0 0;
			}

			.nav-link:not(.active):hover {
				border-color: transparent;
			}

			.active {
				border-top-color: var(--bs-primary);
			}

			.navigation-dropdown {
				cursor: pointer;

				.nav-link {
					padding-right: 0.3rem;
					line-height: 1em;
					border-color: transparent;
					background: none;
					color: #007bff;
					&:hover {
						color: #0056b3;
					}
				}

				.dropdown-toggle:after {
					display: none;
				}

				.dropdown-menu {
					border-color: #d9d9d9;
				}

				svg {
					width: 22px;
					height: 22px;
				}

				&.show {
					.nav-link {
						color: #0056b3;
					}
				}
			}
		}
	}
}

.svg {
	display: inline-flex;
	align-items: center;

	> svg {
		width: 100%;
		height: 100%;
		fill: currentColor;
	}

	&.icon-16 {
		width: 16px;
		height: 16px;
	}
	&.icon-20 {
		width: 20px;
		height: 20px;
	}
	&.icon-24 {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

blockquote {
	@extend .border, .bg-light-subtle;
	padding: 0.5rem 1.5rem;
	> p {
		margin-bottom: 0;
	}
}

.shiki {
	margin-bottom: 0;
	padding: 0.5rem 1.5rem;
	tab-size: 1rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	code {
		white-space: pre-wrap;
	}
	@media (max-width: 991px) {
		padding: 0.5rem;
	}
}

iframe {
	opacity: 0;
	&.loaded {
		opacity: 1;
	}
}

// Dark mode override
@if $enable-dark-mode {
	@include color-mode(dark, true) {
		color-scheme: dark;

		.nav-link:focus-visible {
			box-shadow: 0 0 0 0.25rem $secondary-bg-subtle-dark;
		}

		.iframe-container {
			background-color: #212529;
		}

		@each $color, $value in $theme-colors-dark-rgb {
			--#{$prefix}#{$color}-rgb: #{$value};
		}
		// This override is not done in BS
		@each $color, $value in $theme-colors-dark {
			--#{$prefix}#{$color}: #{$value};
		}

		// Override some color only for the dark mode
		@each $color, $value in $theme-colors-dark {
			.btn-outline-#{$color} {
				@include button-outline-variant($value);
			}
		}
		@each $color, $value in $theme-colors-dark {
			.text-bg-#{$color} {
				color: color-contrast($value) if($enable-important-utilities, !important, null);
				background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
			}
		}
		.card {
			color: $light;
			background-color: $primary;
		}

		.shiki,
		.shiki span {
			color: var(--shiki-dark) !important;
			background-color: var(--shiki-dark-bg) !important;
			/* Optional, if you also want font styles */
			font-style: var(--shiki-dark-font-style) !important;
			font-weight: var(--shiki-dark-font-weight) !important;
			text-decoration: var(--shiki-dark-text-decoration) !important;
		}
		blockquote {
			background-color: #131313 !important;
		}
	}
}

[data-agnos-theme='light'] {
	.svg.auto {
		display: none;
	}
	.svg.dark {
		display: none;
	}
}
[data-agnos-theme='auto'] {
	.svg.light {
		display: none;
	}
	.svg.dark {
		display: none;
	}
}
[data-agnos-theme='dark'] {
	.svg.light {
		display: none;
	}
	.svg.auto {
		display: none;
	}
}

// SVG size
.overview-workflow {
	@extend .w-100;
}

.logo-bootstrap {
	color: #712cf9;
}

.pres-card-logo {
	width: 50px;
	height: 30px;
}

//DocSearch
@import '@docsearch/css';
:root {
	--docsearch-primary-color: #26005a;
	--docsearch-text-color: #212529;
	--docsearch-highlight-color: var(--docsearch-primary-color);
	--docsearch-hit-color: #212529;
	--docsearch-muted-color: #212529;
}

.DocSearch-Hit-content-wrapper {
	overflow-y: hidden;
}
