// Navbar clipboard menu and status notices, in the editor page.

$shiftsnap-accent: #0473aa;
$shiftsnap-error: #d63638;

.shiftsnap-nav {
	position: relative;

	&[hidden] {
		display: none;
	}
}

.shiftsnap-nav-toggle {
	position: relative;
	color: #fff !important;

	// Centered whatever padding the navbar gives its buttons (WPBakery 6 leaves no room).
	.shiftsnap-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		transform: translate(-50%, -50%);
	}
}

.shiftsnap-count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: $shiftsnap-accent;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;

	&:empty {
		display: none;
	}
}

.shiftsnap-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 100010;
	box-sizing: border-box;
	width: 280px;
	max-width: calc(100vw - 32px);
	padding: 12px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	color: #1e1e1e;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;

	&[hidden] {
		display: none;
	}
}

.shiftsnap-panel-title {
	margin: 0 0 8px;
	font-weight: 600;
}

.shiftsnap-panel-empty {
	margin: 0;
	color: #646970;
}

.shiftsnap-list {
	max-height: 240px;
	margin: 0 0 12px;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	counter-reset: shiftsnap;

	li {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 4px 0;
		border-bottom: 1px solid #f0f0f1;
		counter-increment: shiftsnap;

		&::before {
			content: counter(shiftsnap) ".";
			min-width: 1.5em;
			color: #646970;
		}

		span {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.shiftsnap-remove {
	display: inline-flex;
	padding: 2px;
	border: 0;
	border-radius: 2px;
	background: none;
	color: #646970;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		color: $shiftsnap-error;
	}
}

.shiftsnap-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	& + & {
		margin-top: 8px;
	}
}

.shiftsnap-panel-btn {
	padding: 6px 12px;
	border: 1px solid $shiftsnap-accent;
	border-radius: 2px;
	background: #fff;
	color: $shiftsnap-accent;
	font-size: 13px;
	cursor: pointer;

	&.is-primary {
		background: $shiftsnap-accent;
		color: #fff;
	}

	&:focus-visible {
		outline: 2px solid $shiftsnap-accent;
		outline-offset: 1px;
	}
}

.shiftsnap-notice {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 100020;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 4px;
	background: #1e1e1e;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity 0.15s, transform 0.15s;

	&.is-visible {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	&[data-type="error"] {
		background: $shiftsnap-error;
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

.shiftsnap-panel-link {
	display: inline-block;
	margin-top: 10px;
	color: $shiftsnap-accent;
	font-size: 12px;

	&[hidden] {
		display: none;
	}
}