/* Windows 98 Channel Bar — see src/channel-bar.js for what this is and why.
   Colours come from the os-gui theme custom properties so it re-themes along with
   everything else when a .themepack is loaded. */

.channel-bar {
	position: fixed;
	top: 24px;
	right: 16px;
	width: 168px;
	/* Sits on the desktop, so windows must cover it — as the real one did.
	   Taskbar is 5000 and the start menu 5001, so anything low is fine here. */
	z-index: 1;
	display: flex;
	flex-direction: column;
	background: var(--ButtonFace, #c0c0c0);
	border: 2px solid;
	border-color:
		var(--ButtonHilight, #fff)
		var(--ButtonDkShadow, #000)
		var(--ButtonDkShadow, #000)
		var(--ButtonHilight, #fff);
	box-shadow:
		inset 1px 1px 0 var(--ButtonLight, #dfdfdf),
		inset -1px -1px 0 var(--ButtonShadow, #808080),
		2px 2px 6px rgba(0, 0, 0, .35);
	font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
	user-select: none;
	-webkit-user-select: none;
}

.channel-bar__title {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 2px;
	padding: 2px 2px 2px 5px;
	background: var(--ActiveTitle, #000080);
	background: linear-gradient(
		90deg,
		var(--ActiveTitle, #000080),
		var(--GradientActiveTitle, #1084d0)
	);
	color: var(--TitleText, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.channel-bar__close {
	margin-left: auto;
	width: 16px;
	height: 14px;
	padding: 0;
	display: grid;
	place-items: center;
	font-family: inherit;
	font-size: 11px;
	line-height: 1;
	color: var(--ButtonText, #000);
	background: var(--ButtonFace, #c0c0c0);
	border: 1px solid;
	border-color:
		var(--ButtonHilight, #fff)
		var(--ButtonDkShadow, #000)
		var(--ButtonDkShadow, #000)
		var(--ButtonHilight, #fff);
	cursor: default;
}
.channel-bar__close:active {
	border-color:
		var(--ButtonDkShadow, #000)
		var(--ButtonHilight, #fff)
		var(--ButtonHilight, #fff)
		var(--ButtonDkShadow, #000);
}

.channel-bar__items {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 4px;
}

.channel {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 4px;
	text-align: left;
	font-family: inherit;
	color: var(--ButtonText, #000);
	background: var(--ButtonFace, #c0c0c0);
	border: 2px solid;
	border-color:
		var(--ButtonHilight, #fff)
		var(--ButtonDkShadow, #000)
		var(--ButtonDkShadow, #000)
		var(--ButtonHilight, #fff);
	box-shadow:
		inset 1px 1px 0 var(--ButtonLight, #dfdfdf),
		inset -1px -1px 0 var(--ButtonShadow, #808080);
	cursor: default;
}

/* Pressed-in bevel, the Win98 way: swap the border and nudge the content. */
.channel:active {
	border-color:
		var(--ButtonDkShadow, #000)
		var(--ButtonHilight, #fff)
		var(--ButtonHilight, #fff)
		var(--ButtonDkShadow, #000);
	box-shadow:
		inset 1px 1px 0 var(--ButtonShadow, #808080),
		inset -1px -1px 0 var(--ButtonLight, #dfdfdf);
}
.channel:active .channel__text { transform: translate(1px, 1px); }

.channel:focus-visible {
	outline: 1px dotted var(--ButtonText, #000);
	outline-offset: -4px;
}

.channel__icon {
	width: 32px;
	height: 32px;
	flex: none;
	image-rendering: pixelated;
}

.channel__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.channel__title {
	font-size: 11px;
	font-weight: 700;
}

.channel__blurb {
	font-size: 10px;
	color: var(--ButtonShadow, #555);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* On narrow screens the desktop icon columns reach the right edge, and the bar would
   sit on top of them. Mobile gets its own treatment later; for now, stay out of the way. */
@media (max-width: 700px), (max-height: 420px) {
	.channel-bar { display: none; }
}