@use "~admin-stylesheets/colors";

a.nab-disabled-link {
	cursor: not-allowed;
}

body.nab-hovering,
body.nab-hovering *,
body.nab-hovering > *,
body.nab-hovering * > * {
	cursor: default;
}

body {
	--nab-highlight-bg: rgba(98, 107, 121, 0.04);
	--nab-highlight-border: #b1b4b9;
	--nab-breadcrumb-highlight-bg: rgba(192, 57, 43, 0.14);
	--nab-breadcrumb-highlight-border: #c0392b;
}

body.nab-hovering {
	--nab-highlight-bg: rgba(66, 133, 244, 0.14);
	--nab-highlight-border: #4285f4;
	--nab-hovered-bg: var(--nab-highlight-bg);
	--nab-hovered-border: var(--nab-highlight-border);
}

.nab-highlight,
.nab-hovered {
	background: var(--nab-highlight-bg);
	border: 2px solid var(--nab-highlight-border);
	box-sizing: border-box;
	position: absolute;
	pointer-events: none;

	&__tooltip {
		display: block;
		background: var(--nab-highlight-border) !important;
		color: #fff !important;
		left: -2px;
		padding: 3px 10px;
		position: absolute !important;
		overflow: hidden !important;
		line-height: 18px !important;
		letter-spacing: 0 !important;
		word-spacing: 0 !important;
		transform: none !important;
		white-space: nowrap !important;
		max-width: 100% !important;
		text-overflow: ellipsis !important;
		font-size: 12px;

		&-text {

			&::after {
				content: var(--nab-selector-name);
			}

			&:hover::after {
				content: var(--nab-selector);
			}
		}
	}
}

.nab-highlight {
	z-index: 99999997;
	transition: opacity 0.25s ease-in-out;

	&--secondary {
		border: 2px dashed var(--nab-highlight-border);

		.nab-highlight__tooltip {
			display: none;
		}
	}

	&--hidden {
		opacity: 0;
	}
}

.nab-hovered {
	background: var(--nab-hovered-bg);
	border: 1px solid var(--nab-hovered-border);
	position: absolute;
	pointer-events: none;
	z-index: 99999998;

	&__tooltip {
		background: var(--nab-hovered-border) !important;
		left: -1px;
	}
}

.nab-breadcrumb-highlight {
	background: var(--nab-breadcrumb-highlight-bg);
	border: 1px solid var(--nab-breadcrumb-highlight-border);
	box-sizing: border-box;
	position: absolute;
	pointer-events: none;
}

.nab-breadcrumbs {

	&-container {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 30px;
		width: auto;
		background: colors.$color__background-grey;
		border-radius: 0 8px 0 0;
		overflow: hidden;
		z-index: 99999999;
		font-size: 12px;
		line-height: 30px;
		color: colors.$color__text;
		transition:
			color 0.2s,
			height 0.2s,
			line-height 0.2s;
		max-width: 40% !important;
		box-shadow:
			0 0 4px 4px colors.$color__box-shadow,
			0 0 4px 1px colors.$color__box-shadow !important;
	}

	&-list {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		cursor: pointer !important;

		&-item {
			display: flex;
			position: relative;
			min-width: 0;
			background-repeat: no-repeat;
			background-position: 15px 8px;
			padding-left: 18px;
			transition:
				flex 0.2s 0.1s,
				background-position 0.2s,
				-webkit-box-flex 0.2s 0.1s,
				-ms-flex 0.2s 0.1s;
			cursor: pointer !important;

			&::before {
				display: block;
				width: 0;
				height: 0;
				border-left: 6px solid colors.$color__border-light;
				position: absolute;
				top: -1px;
				margin-left: 1px;
				z-index: 1;
				-webkit-transition: border-width 0.2s;
				-o-transition: border-width 0.2s;
				transition: border-width 0.2s;

				border-top: 17px solid transparent;
				border-bottom: 17px solid transparent;
				left: 100%;
				content: " ";
			}

			&::after {
				display: block;
				width: 0;
				height: 0;
				border-left: 6px solid colors.$color__background-grey;
				position: absolute;
				top: -1px;
				z-index: 2;
				-webkit-transition: border-width 0.2s;
				-o-transition: border-width 0.2s;
				transition: border-width 0.2s;

				border-top: 17px solid transparent;
				border-bottom: 17px solid transparent;
				left: 100%;
				content: " ";
			}

			&:hover {
				background-color: #d6d6d6;
				-webkit-box-flex: 0;
				-ms-flex: 0 0 auto;
				flex: 0 0 auto;
			}

			&:hover::after {
				border-left-color: #d6d6d6;
			}

			span {
				white-space: nowrap;
				overflow: hidden;
				display: inline-block;
				padding-right: 12px;
				text-overflow: ellipsis;
				cursor: pointer !important;
			}

			&--selected {
				background-color: colors.$color__background-editor;
				background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDE0IDE0Jz48Zz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyIDIpJyBmaWxsPSdub25lJyBzdHJva2U9JyM0Y2EzZWUnIHN0cm9rZS13aWR0aD0nMic+PHJlY3Qgd2lkdGg9JzknIGhlaWdodD0nOScgc3Ryb2tlPSdub25lJy8+PHJlY3QgeD0nMScgeT0nMScgd2lkdGg9JzcnIGhlaWdodD0nNycgZmlsbD0nbm9uZScvPjwvZz48bGluZSB5Mj0nMycgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNi41IC0wLjUpJyBmaWxsPSdub25lJyBzdHJva2U9JyM0Y2EzZWUnIHN0cm9rZS13aWR0aD0nMScvPjxsaW5lIHgyPSczJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgtMC41IDYuNSknIGZpbGw9J25vbmUnIHN0cm9rZT0nIzRjYTNlZScgc3Ryb2tlLXdpZHRoPScxJy8+PGxpbmUgeTI9JzMnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDYuNSAxMC41KScgZmlsbD0nbm9uZScgc3Ryb2tlPScjNGNhM2VlJyBzdHJva2Utd2lkdGg9JzEnLz48bGluZSB4Mj0nMycgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTAuNSA2LjUpJyBmaWxsPSdub25lJyBzdHJva2U9JyM0Y2EzZWUnIHN0cm9rZS13aWR0aD0nMScvPjwvZz48L3N2Zz4=);
				background-repeat: no-repeat;
				padding-left: 32px;

				&:hover {
					background-color: colors.$color__background-editor;
					cursor: default !important;
				}

				&::after {
					border-left-color: colors.$color__background-editor;
				}

				&:hover::after {
					border-left-color: colors.$color__background-editor;
				}
			}
		}
	}
}