@use "sass:math";

@use "../../../../010-settings/" as *;
@use "../../../../010-settings/legacy-settings/legacy-settings_symbol" as *;
@use "../../../../050-layout/basics/" as *;
@use "../../../../050-layout/standardpage/" as *;

$il-slate-bulky-level2-bg-color: $il-main-dark-bg;
$il-slate-tree-padding: $il-padding-small-vertical 0;

.il-maincontrols-slate {
	&.disengaged {
		display:none;
	}
	.btn-bulky,
	.link-bulky {
		// see general styling in button component
		// this styling is for expandable entries
		&.engaged::after,
		&.disengaged::after {
				font-family: "il-icons";
				font-size: $il-slate-bulky-glyph-size;
		}
		&.engaged::after {
				content: " \e604";
		}
		&.disengaged::after {
				content: " \e606";
		}
		.icon {
			filter: invert(50%);
		}
	}
	.c-tooltip__container:has(.btn-bulky),
	.c-tooltip__container:has(.link-bulky) {
		width: 100%;
	}

	.il-maincontrols-slate .btn-bulky {
		background-color: $il-slate-bulky-level2-bg-color;
	}

	&.il-maincontrols-slate-notification{
		.il-maincontrols-slate-notification-title{
			padding: $il-padding-large-horizontal;
			.btn-bulky{
				.glyph{
					:before{
						content: " \e605";
						font-family: "il-icons";
						font-size: $il-slate-bulky-icon-size;
						margin-right: 10px;
					}
				}
				margin: -$il-margin-large-horizontal;
				border: none;
				border-right: solid 3px;
				border-right-color: $il-main-dark-bg;
				padding: $il-padding-large-horizontal;

				background-color: transparent;

				width: 50%;
			}
		}
	}
	//$Todo, this is a fix for #27705. Note the similarities to the back button above from the notification center.
	//$Todo This should be probably refactored into a named Back Button Component or similar for slates. The usage of
	//$Todo ID as selector tag also hints to an issue concerning the unique usage of this code here.
	#il-tag-slate-container, #ilHelpPanel{
		.btn-bulky{
			.glyph{
				:before{
					content: " \e605";
					font-family: "il-icons";
					font-size: $il-slate-bulky-icon-size;
				}
			}
		}
	}

	.panel-body {
		//See #33757
		&::after {
			content: "";
			display: inline;
			height: 0;
			clear: both;
			visibility: hidden;
		}
	}

}

// color hierchachy highlight slate depth levels
// see Mantis #26107
.il-maincontrols-slate.engaged {
	&[data-depth-level="2"] {
		.btn-bulky:not(:hover),
		.link-bulky:not(:hover) {
			background-color: $il-slate-bulky-level2-bg-color;
		}
	}
	&[data-depth-level="3"] {
		.btn-bulky:not(:hover),
		.link-bulky:not(:hover) {
			background-color: rgba($il-slate-bulky-level2-bg-color, math.div(15%, 100.0%));
		}
	}
	&[data-depth-level="4"] {
		.btn-bulky:not(:hover),
		.link-bulky:not(:hover) {
			background-color: rgba($il-slate-bulky-level2-bg-color, math.div(10%, 100.0%));
		}
	}
}

.il-maincontrols-slate-content {
	> ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		li {
			padding: 0;
		}
	}
	p, h1, h2, h3, li {
		padding: $il-slate-content-spacing $il-slate-content-spacing*2;
	}
	> hr {
		margin: $il-slate-content-spacing 0;
	}
	li.jstree-node {
		padding: $il-slate-tree-padding;
	}
	li.il-workflow-step {
		padding: 0 $il-slate-content-spacing*2;
	}

	> .c-form,
	> #copg-editor-slate-content > .c-form {
		padding: $il-padding-xlarge-vertical $il-padding-xlarge-horizontal;
	}
}

.il-maincontrols-slate-close,
.il-maincontrols-slate-back {
	button {
		background-color: transparent;
	}
}

.il-maincontrols-slate-back {
	display: none;
	&.active {
		display: block;
	}
	button {
		width: 100%;
		text-align: left;
		padding: 30px 0 10px 20px;
	}
}

// close slate
.il-maincontrols-slate-close {
	width: 100%;
	border-bottom: 1px solid $il-main-border-color;
	border-top: 1px solid $il-main-border-color;
	height: 50px;
	margin-top: auto;
	bottom: 0;
	position: sticky;
	.bulky-label {
		display: none;
	}
	.btn-bulky {
		background-color: $il-main-bg;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		text-align: right;
		.glyph {
			padding-right: 20px;
		}
		&.engaged {
			background-color: $il-main-bg;
			border: 0;
		}
		&:active
		{
			outline: none;
		}
	}
}

// only for mobile view
// when badges are displayed together with glyphs in slate entries
// the visual left alignment is broken
@media only screen and (max-width: $il-grid-float-breakpoint-max) {
	.il-maincontrols-slate {
		span.glyph{
			width: 45px;
			text-align: left;
		}
		.il-avatar{
			margin-right: 45px - $il-avatar-inner-mobile-size;
		}
		.link-bulky .icon.small, .btn-bulky .icon.small {
			margin-right: 45px - $il-icon-size-small;
		}
	}
}
//