//----------- start system panels ------------//
//this will get added to root
.panel-fullscreen {
	overflow: hidden;
	max-width: 100%;
}

// add the moving cursor to the panel header H2 element (which expands to full length)
// we are not adding to panel-hdr because it adds the cursor move to almost everything inside the .panel-hdr
.sortable-active {
	.panel:not(.panel-locked):not(.panel-fullscreen) {
		.panel-hdr>h2 {
			cursor: move;
		}
	}
}

.panel {

	--border-radius: 0.375rem; //button border radius 6px

	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--app-panel-bg, #fff);
	box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.05);
	margin-bottom: 1.5rem;
	border: 1px solid var(--app-panel-border-color, rgba(0, 0, 0, 0.09));
	border-bottom: 1px solid var(--app-panel-border-bottom, #e0e0e0);
	border-radius: var(--border-radius);
	// transition: border 500ms ease-out;

	//&.sortable-chosen {
	//border: 1px solid rgba(var(--success), 0.3);

	// can't click on panel icons
	// &::after {
	// 	content: "";
	// 	position: absolute;
	// 	top:0;
	// 	left:0;
	// 	right:0;
	// 	bottom:0;
	// 	border-radius: inherit;
	// 	z-index: 10;
	// 	border: 2px solid rgba(var(--success), 0.9);
	// }
	//}

	//class when being dragged
	&.panel-selected {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: inherit;
			z-index: 10;
			background: repeating-linear-gradient(-55deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 9px);
			background-color: var(--panel-drag-bg, rgb(249, 249, 249));
			opacity: 0.5;
			border: 2px solid rgba(var(--success), 0.9);
		}
	}

	&.panel-icon {

		.panel-toolbar {

			.btn-panel {
				margin-left: 0;
				position: relative;

				--sa-icon-hover-fill-opacity: 0.2;

				&[data-action="panel-collapse"] {
					.sa-icon {
						stroke: var(--bs-success);
					}

					&:hover {
						.sa-icon {
							fill: rgba(var(--success), var(--sa-icon-hover-fill-opacity))
						}
					}

				}

				&[data-action="panel-fullscreen"] {
					.sa-icon {
						stroke: var(--bs-warning);
					}

					&:hover {
						.sa-icon {
							fill: rgba(var(--warning), var(--sa-icon-hover-fill-opacity))
						}
					}
				}

				&[data-action="panel-close"] {
					.sa-icon {
						stroke: var(--bs-danger);
					}

					&:hover {
						.sa-icon {
							fill: rgba(var(--danger), var(--sa-icon-hover-fill-opacity))
						}
					}
				}

				&::after {
					content: "";
					width: 1.875rem;
					height: 1.875rem;
					position: absolute;
					//left: -0.1875rem;
					//top: -0.1875rem;
					//background: rgba(0, 0, 0, 0.05);
					border-radius: 100%;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			[data-action*="panel-"]:not(.dropdown-item) {
				.sa-icon {
					width: 1.5rem;
					height: 1.5rem;
					stroke-width: 1px;
					fill: none;
					//stroke: #c3c3c3;
				}
			}



			// .sa-icon {
			// 	width: 1.5rem;
			// 	height: 1.5rem;
			// 	stroke-width: 1px;
			// 	fill: none;
			// 	stroke: #c3c3c3;
			// }

		}
	}

	&:not(.panel-icon) {
		.btn-panel {
			width: 1rem;
			height: 1rem;
			opacity: 0.8;

			&:hover {
				opacity: 1;
			}

			.sa-icon {
				display: none;
			}

			&[data-action="panel-collapse"],
			&.js-panel-collapse {
				background: var(--bs-success);
			}

			&[data-action="panel-fullscreen"],
			&.js-panel-fullscreen {
				background: var(--bs-warning);
			}

			&[data-action="panel-close"],
			&.js-panel-close {
				background: var(--bs-danger);
			}
		}
	}

	// &.panel-collapsed .panel-container.show {
	// 	height: 0;
	// 	overflow: hidden;
	// 	visibility: hidden;
	// 	transition: height 0.3s ease, visibility 0.3s ease;
	// }

	.panel-container {
		position: relative;
		border-radius: 0 0 var(--border-radius) var(--border-radius);

		.panel-content {
			padding: 1rem;

			&:only-child,
			&:last-child {
				border-radius: 0 0 var(--border-radius) var(--border-radius);
			}
		}
	}

	&.panel-refreshing {
		//cursor: wait;


		[data-action="panel-refresh"] {
			color: var(--bs-gray-500);
			pointer-events: none;
			background-color: rgba(0, 0, 0, 0.07);
			box-shadow: none;
			border-color: rgba(0, 0, 0, 0.05);
			cursor: wait;

			&.dropdown-item {
				background: none;
			}
		}

		.panel-container {

			//overflow: hidden;

			.panel-content {
				opacity: 0.5;
				//scale: (0.9);
				transition: all 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
				//transform: translate(0, 10%);
			}

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: inherit;
				z-index: 10;
			}

			&::after {
				content: "\e098";
				position: absolute;
				font-family: "smartadmin-icons";
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				z-index: 11;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 2rem;
				color: var(--bs-gray-500);
				color: currentColor;

				animation: refresh 2s linear infinite;
			}
		}
	}

	&.panel-fullscreen {
		position: fixed !important;
		z-index: 2055;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh !important;
		max-height: 100vh !important;
		width: 100vw !important;
		max-width: 100vw !important;
		border-radius: 0;
		border: 0;

		[data-action="panel-collapse"] [data-action="panel-close"] {
			display: none !important;
		}

		.panel-hdr {
			height: 4.125rem;
			border-radius: 0;
			box-shadow: 0 0.125rem 0.125rem -0.0625rem rgba(#2d4778, 0.1);

			h2 {
				font-size: 14px;
				font-weight: 400;
			}

			.panel-toolbar {
				.btn-panel[data-action="panel-fullscreen"] {
					.sa-icon {
						width: 2rem;
						height: 2rem;
					}
				}

				[data-action="panel-collapse"],
				[data-action="panel-close"] {
					display: none;
				}
			}
		}

		.panel-container {
			flex: 1;
			overflow-y: auto;
			border-radius: 0;
			display: block !important;
		}
	}

	&.panel-locked {

		//make the lock text look active after it's clicked
		[data-panel-toggle="panel-locked"].dropdown-item {
			font-weight: 500;
			color: var(--primary-500);
		}

		//user get's a small lock icon on the panel header when they try to move it it lights up
		.panel-hdr {
			h2 {
				&::before {
					font-family: "smartadmin-icons";
					content: "\f2ae";
					position: absolute;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 1rem;
					color: currentColor;
					height: 24px;
					width: 24px;
					right: 0;
					background: var(--bs-body-bg);
					border-radius: 24px;
					border: 1px solid #ededed;
					padding-bottom: 2px;
					padding-right: 1px;
					top: 50%;
					transform: translate(0, -50%);
					//transition: all 0.2s ease;
				}

				&:active {
					&::before {
						color: #fff;
						background: var(--danger-500);
						border-color: var(--danger-600);
					}
				}

				&:only-child {
					&::before {
						right: 1rem;
					}
				}

			}

		}

		// switch panel lock text
		.panel-locked-text {
			display: block;
		}

		.panel-unlock-text {
			display: none;
		}
	}

	// switch panel unlock text
	&:not(.panel-locked) {
		.panel-locked-text {
			display: none;
		}

		.panel-unlock-text {
			display: block;
		}
	}

	//? what is this for?
	&.ui-sortable-helper {
		box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.05), 0 5px 20px 0 rgba(0, 0, 0, 0.09);
	}
}

.panel-tag {
	padding: 1rem 1rem;
	margin-bottom: 2rem;
	border-left: 0.1875rem solid var(--success-500);
	background: var(--panel-tag-background, lighten($color-success, 52%));
	font-weight: 400;
	font-size: 0.875rem;
	border-radius: 0px 0.25rem 0.25rem 0px;

	// NOTE: don't think this is working look back at it later
	>*:last-child,
	>*:only-child {
		margin-bottom: 0;
	}

	&:only-child {
		margin-bottom: 0;
	}
}

.panel-container {
	transition: height 0.35s ease;
}

.panel-collapsed .panel-container {
	height: 0;
	overflow: hidden;
}

.panel-hdr {
	display: flex;
	align-items: center;
	//background: #fff;
	min-height: 3rem;
	//border-bottom: 1px solid  var(--app-panel-border-bottom, rgba(0, 0, 0, 0.07));
	border-radius: var(--border-radius) var(--border-radius) 0 0;

	.panel-collapsed & {
		border-radius: var(--border-radius) var(--border-radius) 0 0;
	}

	> :first-child {
		padding-left: 1rem;
	}

	> :last-child {
		padding-right: 1rem;
	}

	h2 {
		flex: 1;
		font-size: 1rem;
		margin: 0;
		display: flex;
		align-items: center;
		line-height: 3rem;
		color: inherit;
		color: var(--bs-body-color);
		position: relative;
		font-weight: 600;

		&:not(:only-child) {
			margin-right: 0.667rem;
		}

		>[class*='fw-'] {
			margin-left: 0.25rem;
		}

		small {
			display: inline-block;
			margin: 0;
			opacity: 0.8;
			font-weight: 400;
			font-size: 0.875rem;
			margin-left: 0.5rem;
		}

		.panel-icon {
			margin-right: 0.5rem;
		}
	}
}

.panel-hdr[class^="bg-"],
.panel-hdr[class*=" bg-"] {
	h2 {
		color: inherit;
	}
}

//? investigate
// .panel-sortable:not(.panel-locked).ui-sortable-helper {
// 	&:active {
// 		border-color: rgba(#000, 0.15);
// 	}
// }

//? investigate
.panel:not(.panel-collapsed) {
	&.panel-icon {
		.panel-expand-icon {
			display: none;
		}
	}
}

.panel-toolbar {
	display: flex;
	align-items: center;
	position: relative;

	.btn-panel {
		margin-left: 0.3rem;
		padding: 0;
		box-sizing: border-box;
		border-radius: 50%;
	}

	.btn-toolbar-master {
		height: 3rem;
		width: 1.826875rem;
		border-radius: 0;
		margin-right: -1rem;
		border-top-right-radius: 0.25rem; //4px
		margin-left: 0.5rem;
		padding: 0 0.8125rem; //13px
		background: transparent;
		border: 0;
		font-size: 1.5625rem; //25px
		color: inherit;
		display: flex;
		align-items: center;
		justify-content: center;

		//border-left: 1px solid rgba(0, 0, 0, 0.05) !important;

		// &::before{
		// 	content: "";
		// 	top:0;
		// 	bottom:0;
		// 	width:1px;
		// 	left:0;
		// 	position: absolute;
		// 	background: rgba(0, 0, 0, 0.05);
		// }

		&.show {
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset !important;
		}

		// wont work if dropdown-menu is inside a wrapper
		&+.dropdown-menu {
			right: 0 !important;
			top: 3rem;
			left: auto !important;
			margin: 0;
			border-radius: 0;
			top: 100% !important;
		}
	}

	.btn-panel-flat:last-child {
		border-top-right-radius: 0.1875rem; //3px
	}
}

// .panel-sortable:not(.panel-fullscreen):not(.panel-locked) .ui-sortable-handle {
// 	cursor: move;
// }

/*
.panel-placeholder {
	background-color: #c3b5d9;
	box-sizing: border-box;
	margin-bottom: 1.5rem;
	border-radius: 0.3125rem;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;

	&:before,
	&:after {
		content: " ";
		background-image: url(data:image/gif;base64,R0lGODlhCAAIAJAAAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgD/ACwAAAAACAAIAAACD4SDYZB6udpiaMJYsXuoAAAh+QQECgD/ACwAAAAACAAIAAACDYQRGadrzVRMB9FZ5SwAIfkEBAoA/wAsAAAAAAgACAAAAg8MDqGYaudeW9ChyOyltQAAIfkEBAoA/wAsAAAAAAgACAAAAg9MgGCXm+rQYtC0WGl9oQAAIfkEBAoA/wAsAAAAAAgACAAAAg+MgWCRernaYmjCWLF7qAAAIfkEBAoA/wAsAAAAAAgACAAAAg2MAwmna81UTAfRWeUsACH5BAQKAP8ALAAAAAAIAAgAAAIPRB6gmGrnXlvQocjspbUAACH5BAQKAP8ALAAAAAAIAAgAAAIPBIJhl5vq0GLQtFhpfaAAADs=);
		border-radius: 0.3125rem;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.3;
	}

	&:before {
		background: #c3b5d9;
		margin: 1px;
		box-sizing: border-box;
		opacity: 1;
		z-index: 1;
	}
}
*/

.mod-panel-clean {
	.panel-hdr {
		background: var(--bs-body-bg);
		background-image: linear-gradient(to bottom, #f7f7f7, var(--bs-body-bg));
		box-shadow: none;

		h2 {
			color: var(--bs-body-color);
			font-weight: 500;
		}
	}
}

/* nav tabs panel */
.nav-tabs-clean {

	.nav-item {

		.nav-link {

			border: 0;

			&.active {
				border-bottom: 1px solid var(--primary-500) !important;
				color: var(--primary-500);
				font-weight: 500;
				border-width: 2px !important;
			}

			&:hover {
				color: var(--primary-500);
			}
		}
	}
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: var(--primary-500);
}

@media only screen and (max-width: 420px) {
	.panel {
		.panel-hdr {
			font-size: 0.875rem; //14px
			min-height: 2.75rem; //34px

			> :first-child {
				padding-left: 0.625rem; //10px
			}

			> :last-child {
				padding-right: 0.625rem; //10px
			}

			.panel-toolbar .btn-toolbar-master {
				margin-right: -0.625rem; //-10px
			}
		}

		.panel-container {
			.panel-content:first-child {
				padding: 0.625rem; //10px
			}
		}
	}
}

@media print {
	.panel-fullscreen {

		.subheader,
		.page-breadcrumb,
		.page-content .panel:not(.panel-fullscreen) {
			display: none;
		}

		.panel-hdr,
		.panel-container,
		.panel-content,
		h2 {
			border: none;
			padding: 0 !important;
		}

		.panel {
			margin: 0;
		}
	}
}

//----------- end system panels ------------//

//sortable
.sortable-ghost {
	opacity: 0.4;
}

.sortable-drag {
	cursor: move;
}