@import "variables.scss";


@import "../../node_modules/bootstrap5/scss/_functions.scss";
@import "../../node_modules/bootstrap5/scss/_variables.scss";

$enable-responsive-font-sizes: true;

$kbd-color:					$dark;
$kbd-bg:					$gray-200;

$input-disabled-bg:			$light;

//$nav-link-padding-y:		.5rem;
//$nav-link-padding-x:		1rem;
$nav-tabs-link-active-bg:	$light;
$headings-color:			$gray-700;
$body-color:                $gray-800;
$sidebar-width:				16rem;

$md:						768px;

@import "bootstrap.scss";


// optionally define the class prefix. defaults to 'ib'
@import "../../node_modules/icon-blender/scss/icon-blender.scss";
@import "../../node_modules/icon-blender/scss/icons/fa.scss";
@import "../../node_modules/icon-blender/scss/icons/feather.scss";
@include icon($icons-fa,'code');
@include icon($icons-fa,'flash');
@include icon($icons-fa,'star');
@include icon($icons-fa,'eye');
@include icon($icons-feather, "menu");




a,
.btn-link{
	cursor:	pointer;
	text-decoration:none;
}

label {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

p, .control-group {
	margin: 0 0 20px 0;
}

pre{
	background: $light;
	padding:	1rem;
}

input[type=button] {
	margin: 0 10px 0 0;
	padding: 6px 10px;
	color: #606060;
	background: #e0e0e0;
	border: 0 none;
	width: auto;
	display: inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-font-smoothing: antialiased;
}

.buttons {
	margin: 0 0 25px 0;
}

input[type=button]:hover {
	background: #dadada;
}

h1, h2, h3, h4, h5{
	margin-top:		3rem;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a{
	color:	$body-color;
}


strong,
b{
	color:			$headings-color;
}

li{
	margin-top: 0.5rem;
}

.main-col{
	min-height:			100vh;
	padding-bottom:		15rem;
	transition:			opacity .3s ease-in-out;
}


.col-600{
	max-width:600px;
}

/**
 * Demo
 *
 */

.demo .value {
	margin: 0 0 10px 0;
	font-size: 12px;
}

.demo{

	.nav-tabs{
		border-bottom: 0 !important;
	}

	.nav-tabs a{
		color:	$secondary;
	}

	.tab-content{
		font-size: $font-size-base * .9;
	}


	pre[class*="language-"]{
		margin:			0 !important;
		border:			1px solid $border-color;
		max-height:		20rem;
	}

	.nav-link.active{
		border-color: $border-color $border-color transparent;
	}

}

/**
 * Syntax highlighter
 */
pre[class*="language-"]{
	background:		$light !important;
}

/**
 * Theme selector
 *
 */
.theme-selector-input{
	float:right;
	margin-top: 0.5rem;
}

/**
 * navbar
 *
 */
#offcanvas{
	height:				100vh;
	position:			fixed;
	top:				0;
	visibility: 		visible;
	color:				$gray-700;
	padding-top:		0;
	background:			$gray-900;

	#offcanvas-inner{
		position:			absolute;
		top:				0;
		padding-top:		4.5rem;
		left:				0;
		right:				0;
		bottom:				0;
		overflow-y:			auto;
		overflow-x:			hidden;
	}

	&:hover,
	&:hover a{
		color:			$gray-500;
	}

	a{
		color:				$gray-600;
		text-decoration:	none;
		transition:			color .3s ease-in-out;
	}

	a.h5{
		font-weight:		bold;
	}

	.nav-link{
		padding:		.35rem 1.5rem .35rem 2.5rem;
	}

	.nav-link.active,
	.nav-link:hover,
	a:hover{
		//color:			var(--bs-light);
		color:			$gray-300;
	}

}


#toggle-offcanvas{
	display:none;
}

//@media (max-width: $md - 1px) {
@include media-breakpoint-down(md) {

	#toggle-offcanvas{
		display:			block;
		position:			fixed;
		top:				0;
		right:				0.5rem;
		z-index:			4;
		font-size:			1.8rem;
		padding:			0.5rem;
		color:				$dark;
		line-height:		1;
		transition: 		color .3s ease-in-out;
	}

	#offcanvas{
		position:	fixed;
		top:		0;
		left:		0;
		bottom:		0;
		right:		0;
		overflow:	auto;
		z-index:	3;
		transition: transform .3s ease-in-out, visibility .3s ease-in-out;
		transform: translateX(-100%);
	}

	.offcanvas-open{
		overflow: hidden;

		#offcanvas{
			transform: translateX(0);
		}

		.main-col{
			opacity:0;
		}

		#toggle-offcanvas{
			color: $gray-300;
		}

	}

}

//@media (min-width: $md) {
@include media-breakpoint-up(md) {
	#offcanvas{
		width: $sidebar-width;
	}
	.main-col{
		margin-left: #{$sidebar-width};
	}

}

/**
 * Docsearch
 */
#docsearch-div{
	position:		absolute;
	padding-top:	1.5rem;
	background:		$gray-900;
	top:			0;
	margin-right:	1rem; // for scrollbar of offcanvas-inner
	padding-bottom:	1rem;
	z-index:		5;

	#docsearch-input{
		border: 0 none;
		background: $gray-800;
		color: $white;
		transition: 0.3s ease-in-out;

		&:focus{
			box-shadow:none;
			background:$white;
			color: $gray-800;
		}
	}


}



.badges{
	a{
		opacity:	0.75;
		transition: opacity .3s ease-in-out;
	}
	a:hover{
		opacity:	1;
	}
}

/**
 * Tables
 */
.table{
	margin-top: 1rem;
}

.table > tbody > tr > th,
.table > thead > tr > th{
	//background:		$table-head-bg;
	font-size:			.825rem;
	//text-transform:		uppercase;
	letter-spacing:		.03em;
	line-height:		1.6;
}

.table-striped > tbody > tr:nth-of-type(2n+1) pre{
	background: $gray-50 !important;
}


/**
 * Algolia
 */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header{
	font-weight:bold;
}
.algolia-docsearch-suggestion--subcategory-column{
	display:none !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content{
	float: none !important;
	width: 100% !important;
	padding-left: 0 !important;
}

.algolia-autocomplete .algolia-docsearch-suggestion--title{
	font-weight: normal !important;
}

.algolia-autocomplete .algolia-docsearch-suggestion--content::before{
	display:none !important;
}