/* =================
   = Windows Class =
   ================= */

.window {
	box-sizing: border-box;
	background: #531515;
	/* border: #955b33 4px ridge; */
	border-top: color-mix(in srgb, #955b33 80%, white) 2px solid;
	border-left: color-mix(in srgb, #955b33 80%, white) 2px solid;
	border-right: color-mix(in srgb, #955b33 40%, black) 2px solid;
	border-bottom: color-mix(in srgb, #955b33 40%, black) 2px solid;
}

/* ===================
   = Window Controls =
   =================== */

.w-titlebar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* background: linear-gradient(90deg, #955b33, #ac724b); */
	background: color-mix(in srgb, #955b33 90%, black);
	box-sizing: content-box;
	vertical-align: middle;
	height: 20px;
}

.w-title {
	color: #ffccaa;
	font-family: "w95fa";
	font-size: 0.9rem;
	font-weight: bolder;
	letter-spacing: 1px;
	padding-top: 1px;
}

.w-left {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	box-sizing: border-box;
	justify-content: flex-start;
	text-align: left;
	vertical-align: middle;
	align-items: center;
	padding-left: 3px;
}

.w-right {
	display: flex;
	flex-direction: row;
	flex: 1 0 auto;
	box-sizing: border-box;
	min-width: fit-content;
	justify-content: flex-end;
	text-align: right;
	vertical-align: middle;
	align-items: center;
	padding: 0 3px;
	a {
	    text-decoration: none;
	}
}

.w-btn {
	height: 14px;
	width: 16px;
	box-sizing: border-box;
	/* image-rendering: pixelated; */
}

.arrow { background: url("../images/arrow.gif"); margin-right: 4px; }
.minimize { background: url("../images/reduce.gif"); margin-left: 4px; }
.maximize { background: url("../images/maximize.gif"); margin-left: 2px; }
.close { background: url("../images/close.gif"); margin-left: 2px; }


@media (prefers-color-scheme: light) {
	.window {
		background: #ccd0da;
		border-top: #eff1f5 2px solid;
		border-left: #eff1f5 2px solid;
		border-right: color-mix(in srgb, #eff1f5 75%, black) 2px ridge;
		border-bottom: color-mix(in srgb, #eff1f5 75%, black) 2px ridge;
	}
	.w-titlebar {
		/* background: linear-gradient(90deg, #eff1f5, #fe640b); // peach */
		background: #1e66f5; /* blue */
	}
	.w-title {color: white; }
	.arrow { background: url("../images/arrow-light.gif"); }
	.minimize { background: url("../images/reduce-light.gif"); }
	.maximize { background: url("../images/maximize-light.gif"); }
	.close { background: url("../images/close-light.gif"); }
	.fd-link { background: url("../images/fd-link-light.gif"); }
}