/*
 * The form of the theme Aero.
 *
 * The theme draws each window in the way of Windows 7 with Aero, in the form
 * of a tool window (WS_EX_TOOLWINDOW). The frame is glass with square corners.
 * The title has no bold type, and the buttons have a shine. The task bar, the
 * calendar of the tray, the start menu and the lists of the menus are also
 * glass, and each button and each frame of an application takes the form of
 * Windows 7.
 *
 * Each size stays the size of the other style sheets: the frame, the title
 * bar, the buttons, the task bar and the start menu. A window thus keeps its
 * place and its size in each theme, and js/wm.js needs no change.
 *
 * js/settings.js writes the form of the theme into the attribute data-theme of
 * the root element. Each rule below starts with that attribute, thus the file
 * has no effect in a different theme.
 *
 * Two themes use this form: Aero Light and Aero Dark. The first block holds
 * the colors of Aero Light. The block for data-variant="dark" changes only
 * these variables, and each rule after it stays the same for the two themes.
 */
html[data-theme="aero"] {
	/*
	 * The color of the glass. The theme file of Windows 7 holds it as
	 * ColorizationColor=0X6B74B8FC: the alpha 0x6B and the color #74b8fc.
	 */
	--aero-glass: rgba(116, 184, 252, 0.42);
	/* A window that is not in front has less color in its glass. */
	--aero-glass-inactive: rgba(116, 184, 252, 0.22);
	/* The task bar, the start menu and the lists of the menus are a darker
	   glass, in the way of Windows 7. A menu often stands over the white
	   field of a window, and white text must be easy to read there too. */
	--aero-bar-glass: rgba(20, 60, 105, 0.78);
	/*
	 * The height of the title bar: a button of 19 px, with 3 px above and
	 * below it, from css/window.css. The part of the window under this
	 * height takes the face of a button, thus the bar holds this value.
	 */
	--aero-caption: 25px;
	/*
	 * The height of a menu bar: 20 px and its line of 1 px, from
	 * css/window.css. A window with a menu bar starts its face of a button
	 * under that bar, thus the bar is a part of the glass.
	 */
	--aero-menubar: 21px;
	/* The top edge of the field of a window: the part under the title bar
	   and under a menu bar. */
	--aero-client-top: var(--aero-caption);
	/*
	 * The field of a window is glass too, with a thin frost on it. The field
	 * thus looks like the title bar, and it is only a little lighter. Black
	 * text stays easy to read on it.
	 */
	--aero-client: rgba(245, 248, 252, 0.15);
	/* The shine on the glass: at the top edge, under the title bar and at the
	   bottom edge. The light line under the top edge of the frame. */
	--aero-shine-top: rgba(255, 255, 255, 0.5);
	--aero-shine-caption: rgba(255, 255, 255, 0.15);
	--aero-shine-bottom: rgba(255, 255, 255, 0.1);
	--aero-edge-light: rgba(255, 255, 255, 0.5);
	/* The glow behind the title. It has the opposite color of the text. */
	--aero-title-glow: #ffffff;
	/* A layer on the picture of the desktop. */
	--aero-wallpaper-shade: transparent;

	/* The push button: the face, the dark edge and the light inner edge, for
	   each state. */
	--aero-btn: linear-gradient(#f2f2f2 0%, #ebebeb 50%, #dddddd 50%, #cfcfcf 100%);
	--aero-btn-edge: #707070;
	--aero-btn-inner: rgba(255, 255, 255, 0.7);
	--aero-btn-hover: linear-gradient(#eaf6fd 0%, #d9f0fc 50%, #bee6fd 50%, #a7d9f5 100%);
	--aero-btn-hover-edge: #3c7fb1;
	--aero-btn-pressed: linear-gradient(#e5f4fc 0%, #c4e5f6 50%, #98d1ef 50%, #68b3db 100%);
	--aero-btn-pressed-edge: #2c628b;
	--aero-btn-disabled: #f4f4f4;
	--aero-btn-disabled-edge: #adb2b5;
	--aero-btn-disabled-text: #838383;

	/* The start button: the face in each state, and the light inner edge. */
	--aero-start: linear-gradient(rgba(140, 200, 255, 0.6), rgba(50, 130, 215, 0.5) 50%, rgba(15, 75, 165, 0.6) 50%, rgba(60, 150, 230, 0.6));
	--aero-start-hover: linear-gradient(rgba(170, 220, 255, 0.75), rgba(80, 160, 240, 0.65) 50%, rgba(30, 105, 200, 0.7) 50%, rgba(90, 180, 250, 0.75));
	--aero-start-pressed: linear-gradient(rgba(100, 160, 230, 0.6), rgba(30, 95, 180, 0.6) 50%, rgba(10, 55, 130, 0.7) 50%, rgba(40, 115, 200, 0.6));
	--aero-start-inner: rgba(255, 255, 255, 0.3);
	--aero-start-pressed-inner: rgba(255, 255, 255, 0.2);

	/* The tabs: the line, the sheet of the panel and the active tab, the other
	   tabs, and a tab under the mouse pointer. */
	--aero-tab-line: #898c95;
	--aero-tab-sheet: rgba(255, 255, 255, 0.2);
	--aero-tab: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
	--aero-tab-hover: linear-gradient(rgba(234, 246, 253, 0.75), rgba(190, 230, 253, 0.5));

	/* The frames: the line of a group, the line of a field in each state, and
	   the two lines of a pane. */
	--aero-group-line: #d5dfe5;
	--aero-field-line: #abadb3;
	--aero-field-hover: #7eb4ea;
	--aero-field-focus: #569de5;
	--aero-pane-dark: rgba(0, 0, 0, 0.28);
	--aero-pane-light: rgba(255, 255, 255, 0.3);

	/* The arrow of the calendar while the user pushes it. */
	--aero-nav-pressed: #cce4f7;
}

/*
 * The colors of Aero Dark.
 *
 * A field, a list and the text of Notepad take the color --window from
 * js/themes.js: dark gray with light text. The glass keeps its alpha, but it
 * gets a dark blue gray, thus the white text on it is easy to read. The
 * buttons, the tabs and the frames get dark faces and dark lines.
 */
html[data-theme="aero"][data-variant="dark"] {
	--aero-glass: rgba(38, 52, 70, 0.62);
	--aero-glass-inactive: rgba(38, 48, 60, 0.45);
	--aero-bar-glass: rgba(10, 16, 24, 0.82);
	--aero-client: rgba(8, 12, 18, 0.35);
	--aero-shine-top: rgba(255, 255, 255, 0.22);
	--aero-shine-caption: rgba(255, 255, 255, 0.06);
	--aero-shine-bottom: rgba(255, 255, 255, 0.03);
	--aero-edge-light: rgba(255, 255, 255, 0.18);
	--aero-title-glow: rgba(0, 0, 0, 0.9);
	--aero-wallpaper-shade: rgba(0, 0, 0, 0.35);

	--aero-btn: linear-gradient(#4a5058 0%, #3e434a 50%, #33373d 50%, #2a2d32 100%);
	--aero-btn-edge: #121416;
	--aero-btn-inner: rgba(255, 255, 255, 0.12);
	--aero-btn-hover: linear-gradient(#4f6f90 0%, #41607f 50%, #33526f 50%, #2c4a66 100%);
	--aero-btn-hover-edge: #5d9ad0;
	--aero-btn-pressed: linear-gradient(#2a4560 0%, #243c54 50%, #1c3247 50%, #1a2e42 100%);
	--aero-btn-pressed-edge: #3f7fb8;
	--aero-btn-disabled: #2a2d32;
	--aero-btn-disabled-edge: #3e434a;
	--aero-btn-disabled-text: #6c737c;

	/* The start button is dark glass with a blue glow at its bottom edge. The
	   glow becomes stronger under the mouse pointer. */
	--aero-start: linear-gradient(rgba(120, 132, 148, 0.45), rgba(68, 78, 92, 0.4) 50%, rgba(22, 28, 36, 0.6) 50%, rgba(40, 82, 128, 0.6));
	--aero-start-hover: linear-gradient(rgba(135, 170, 210, 0.55), rgba(72, 108, 150, 0.5) 50%, rgba(24, 52, 88, 0.65) 50%, rgba(55, 120, 190, 0.75));
	--aero-start-pressed: linear-gradient(rgba(62, 80, 104, 0.6), rgba(36, 50, 70, 0.6) 50%, rgba(14, 24, 38, 0.75) 50%, rgba(30, 70, 118, 0.65));
	--aero-start-inner: rgba(255, 255, 255, 0.16);
	--aero-start-pressed-inner: rgba(255, 255, 255, 0.08);

	--aero-tab-line: #50565f;
	--aero-tab-sheet: rgba(255, 255, 255, 0.07);
	--aero-tab: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
	--aero-tab-hover: linear-gradient(rgba(90, 150, 210, 0.45), rgba(60, 120, 180, 0.3));

	--aero-group-line: #474d56;
	--aero-field-line: #555b64;
	--aero-field-hover: #4f8cc9;
	--aero-field-focus: #3f8ee0;
	--aero-pane-dark: rgba(0, 0, 0, 0.5);
	--aero-pane-light: rgba(255, 255, 255, 0.12);

	--aero-nav-pressed: #24486c;
}

/*
 * The picture of the desktop.
 *
 * The picture fills the whole screen and keeps its form: it becomes as large
 * as necessary to cover the screen, and the browser cuts the parts that stand
 * out. It thus fits each form of a screen, flat or upright.
 *
 * The picture lies on the page and not on the desktop, thus it also stands
 * behind the task bar, and the glass of the bar shows it. The browser loads
 * it only for this theme. The color of the theme shows while it loads.
 */
html[data-theme="aero"] body {
	background:
		linear-gradient(var(--aero-wallpaper-shade), var(--aero-wallpaper-shade)),
		var(--background) url("../img/aero-background.jpg") center / cover no-repeat;
}
html[data-theme="aero"] #desktop {
	background: transparent;
}

/*
 * The frame of glass.
 *
 * The glass lies behind the whole window, and the browser makes the parts
 * behind it unclear. The field under the title bar gets the light frost of
 * --aero-client, thus the text of an application stands on a calm color. A
 * field or a list of an application keeps its own color. A dark line goes
 * around the field, in the way of Windows 7.
 *
 * The first layer of the list lies on top. The line is four layers of 1 px,
 * one for each side: the field is glass, and a layer under it would show
 * through.
 */
html[data-theme="aero"] .window,
html[data-theme="aero"] .dialog-window {
	--aero-line: rgba(0, 0, 0, 0.45);
	background:
		linear-gradient(var(--aero-line), var(--aero-line))
			-1px calc(var(--aero-client-top) - 1px) / calc(100% + 2px) 1px
			no-repeat content-box padding-box,
		linear-gradient(var(--aero-line), var(--aero-line))
			-1px calc(100% + 1px) / calc(100% + 2px) 1px
			no-repeat content-box padding-box,
		linear-gradient(var(--aero-line), var(--aero-line))
			-1px calc(var(--aero-client-top) - 1px) / 1px calc(100% - var(--aero-client-top) + 2px)
			no-repeat content-box padding-box,
		linear-gradient(var(--aero-line), var(--aero-line))
			calc(100% + 1px) calc(var(--aero-client-top) - 1px) / 1px calc(100% - var(--aero-client-top) + 2px)
			no-repeat content-box padding-box,
		linear-gradient(var(--aero-client), var(--aero-client))
			0 var(--aero-client-top) / 100% calc(100% - var(--aero-client-top))
			no-repeat content-box,
		linear-gradient(var(--aero-shine-top), var(--aero-shine-caption) var(--aero-caption), var(--aero-shine-bottom)),
		var(--aero-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* A dark edge, a light line under the top edge, and a soft shadow in
	   place of the hard shadow of Windows 2000. */
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 0 var(--aero-edge-light),
		2px 3px 12px rgba(0, 0, 0, 0.45);
}
/* A browser without :has() keeps the glass of the window in front. */
html[data-theme="aero"] .window:has(> .titlebar.inactive),
html[data-theme="aero"] .dialog-window:has(> .titlebar.inactive) {
	--aero-glass: var(--aero-glass-inactive);
}
/* A window with a menu bar under its title bar. A browser without :has()
   puts the face of a button under the bar, and the bar then shows its color
   without the page behind it. */
html[data-theme="aero"] .window:has(> .titlebar + .menubar) {
	--aero-client-top: calc(var(--aero-caption) + var(--aero-menubar));
}

/*
 * The title bar is a part of the glass. Its height stays the same.
 *
 * The frame of glass has a thin edge, thus the buttons move nearer to it than
 * in Windows 2000: 5 px under the top edge and 4 px from the right edge. The
 * line of the field is then 3 px under them.
 */
html[data-theme="aero"] .titlebar {
	height: var(--aero-caption);
	box-sizing: border-box;
	background: transparent;
	padding: 1px 0 3px 4px;
}
/* The title of Windows 7: no bold type, and a glow behind the text. The glow
   is white behind black text and black behind white text. The text is thus
   easy to read on each glass. */
html[data-theme="aero"] .titlebar span {
	font-family: "Segoe UI", Tahoma, sans-serif;
	font-weight: normal;
	text-shadow: 0 0 6px var(--aero-title-glow), 0 0 3px var(--aero-title-glow);
}

/*
 * The buttons of the title bar. Each button keeps its size, and it gets a
 * shine in place of the frame of Windows 2000: the upper half is light, and
 * the lower half is darker. The picture is white with a dark edge. The corners
 * of a button are a little round, in the way of Windows 7; the corners of the
 * window stay square.
 */
html[data-theme="aero"] .title-btn {
	border-radius: 2px;
	color: #ffffff;
	background: linear-gradient(
		rgba(255, 255, 255, 0.6) 0%,
		rgba(255, 255, 255, 0.3) 45%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.25) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(30, 45, 70, 0.6),
		inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
html[data-theme="aero"] .title-btn svg {
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
html[data-theme="aero"] .title-btn:hover {
	background: linear-gradient(
		rgba(255, 255, 255, 0.75) 0%,
		rgba(175, 215, 255, 0.6) 45%,
		rgba(60, 150, 240, 0.55) 50%,
		rgba(140, 205, 255, 0.7) 100%);
}
html[data-theme="aero"] .title-btn:active {
	background: linear-gradient(
		rgba(190, 220, 250, 0.8) 0%,
		rgba(90, 150, 220, 0.7) 45%,
		rgba(20, 80, 170, 0.7) 50%,
		rgba(80, 160, 230, 0.8) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(30, 45, 70, 0.7),
		inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/*
 * The close button of the window in front is red. Windows 7 gives the red only
 * to that window: the close button of each other window is glass, and it
 * becomes red under the mouse pointer.
 */
html[data-theme="aero"] .titlebar:not(.inactive) .title-btn.close {
	background: linear-gradient(
		#e9a99b 0%,
		#dc7e69 45%,
		#c7432a 50%,
		#d3603f 75%,
		#e59f86 100%);
	box-shadow:
		inset 0 0 0 1px rgba(70, 20, 10, 0.7),
		inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
html[data-theme="aero"] .titlebar .title-btn.close:hover {
	background: linear-gradient(
		#f5c0b0 0%,
		#ee8f76 45%,
		#e0401f 50%,
		#ec6a44 75%,
		#f6b59a 100%);
	box-shadow:
		inset 0 0 0 1px rgba(70, 20, 10, 0.7),
		inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
html[data-theme="aero"] .titlebar .title-btn.close:active {
	background: linear-gradient(
		#d58c7c 0%,
		#c2604a 45%,
		#9e2a14 50%,
		#b3452a 75%,
		#cc7c64 100%);
	box-shadow:
		inset 0 0 0 1px rgba(70, 20, 10, 0.8),
		inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/*
 * ---------- The buttons and the tabs of the applications ----------
 *
 * A button of an application gets the form of a push button of Windows 7: a
 * gray shine with a dark edge, light blue under the mouse pointer and a darker
 * blue while the user pushes it. A button that stays in keeps that darker
 * blue. The size stays the size that the application gives.
 */
html[data-theme="aero"] .btn {
	border-radius: 2px;
	background: var(--aero-btn);
	box-shadow:
		inset 0 0 0 1px var(--aero-btn-edge),
		inset 0 0 0 2px var(--aero-btn-inner);
}
html[data-theme="aero"] .btn:hover {
	background: var(--aero-btn-hover);
	box-shadow:
		inset 0 0 0 1px var(--aero-btn-hover-edge),
		inset 0 0 0 2px var(--aero-btn-inner);
}
html[data-theme="aero"] .btn:active,
html[data-theme="aero"] .btn[aria-pressed="true"],
html[data-theme="aero"] .btn[aria-pressed="true"]:hover {
	color: var(--btn-text);
	background: var(--aero-btn-pressed);
	box-shadow:
		inset 0 0 0 1px var(--aero-btn-pressed-edge),
		inset 1px 1px 2px rgba(0, 0, 0, 0.35);
}
html[data-theme="aero"] .btn:disabled,
html[data-theme="aero"] .btn:disabled:hover {
	color: var(--aero-btn-disabled-text);
	text-shadow: none;
	background: var(--aero-btn-disabled);
	box-shadow: inset 0 0 0 1px var(--aero-btn-disabled-edge);
}

/*
 * The panel and the active tab are one sheet of lighter glass, in the way of
 * a property sheet of Windows 7: the tab has the color of the panel and goes
 * into it without a line. The other tabs are darker, and they stand on the
 * top edge of the panel.
 *
 * Glass cannot cover a line, thus the panel draws no top edge. The row of the
 * tabs draws that edge in parts: under each other tab, in each gap and at the
 * two ends of the row, and not under the active tab.
 */
html[data-theme="aero"] .tab-panel {
	background: var(--aero-tab-sheet);
	box-shadow:
		inset 1px 0 0 var(--aero-tab-line),
		inset -1px 0 0 var(--aero-tab-line),
		inset 0 -1px 0 var(--aero-tab-line);
}
html[data-theme="aero"] .tab {
	position: relative;
	background: var(--aero-tab);
	box-shadow:
		inset 0 1px 0 var(--aero-tab-line),
		inset 1px 0 0 var(--aero-tab-line),
		inset -1px 0 0 var(--aero-tab-line);
}
html[data-theme="aero"] .tab:hover {
	background: var(--aero-tab-hover);
	box-shadow:
		inset 0 1px 0 var(--aero-btn-hover-edge),
		inset 1px 0 0 var(--aero-btn-hover-edge),
		inset -1px 0 0 var(--aero-btn-hover-edge);
}
/* The active tab goes 2 px into the panel (css/window.css). Its color stops
   at the top edge of the panel, and its side lines stop on that edge. */
html[data-theme="aero"] .tab[aria-selected="true"] {
	background:
		linear-gradient(var(--aero-tab-line), var(--aero-tab-line)) 0 0 / 100% 1px no-repeat,
		linear-gradient(var(--aero-tab-line), var(--aero-tab-line)) 0 0 / 1px calc(100% - 1px) no-repeat,
		linear-gradient(var(--aero-tab-line), var(--aero-tab-line)) 100% 0 / 1px calc(100% - 1px) no-repeat,
		linear-gradient(var(--aero-tab-sheet), var(--aero-tab-sheet)) 0 0 / 100% calc(100% - 2px) no-repeat;
	box-shadow: none;
}
/* The top edge of the panel under each other tab, and in the gap at its left
   side. */
html[data-theme="aero"] .tab::after {
	content: "";
	position: absolute;
	left: -2px;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--aero-tab-line);
}
/* Under the active tab, only the gap at its left side. */
html[data-theme="aero"] .tab[aria-selected="true"]::after {
	right: auto;
	width: 2px;
	bottom: 1px;
}
/* The top edge at the two ends of the row. The part at the right side fills
   the rest of the row. */
html[data-theme="aero"] .tabs::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 3px;
	height: 1px;
	background: var(--aero-tab-line);
}
html[data-theme="aero"] .tabs::after {
	content: "";
	flex: 1;
	height: 1px;
	margin: 0 0 1px -2px;
	background: var(--aero-tab-line);
}

/*
 * ---------- The frames ----------
 *
 * The frames of Windows 7 have a thin line in place of the edge of Windows
 * 2000. A group has a light line. A field has a gray line, which becomes blue
 * under the mouse pointer and while the field holds the input.
 *
 * The edge of a field keeps its 2 px, thus the field keeps its size. The
 * color of the field covers the inner pixel of the edge, and only the outer
 * pixel shows the line.
 */
html[data-theme="aero"] .group {
	border-color: var(--aero-group-line);
}
html[data-theme="aero"] .field {
	border-color: transparent;
	background:
		linear-gradient(var(--window), var(--window))
			-1px -1px / calc(100% + 2px) calc(100% + 2px)
			no-repeat padding-box border-box,
		var(--aero-field-line);
}
html[data-theme="aero"] .field:hover {
	background-color: var(--aero-field-hover);
}
html[data-theme="aero"] .field:focus {
	background-color: var(--aero-field-focus);
	outline: none;
}
html[data-theme="aero"] .sunken {
	box-shadow: inset 0 0 0 1px var(--aero-field-line);
}
/* A pane is glass, in the way of the field of the window: a dark line and a
   light line show its edge. White cards in it stay white. */
html[data-theme="aero"] .pane {
	background: transparent;
	box-shadow:
		inset 0 0 0 1px var(--aero-pane-dark),
		inset 0 0 0 2px var(--aero-pane-light);
}

/*
 * ---------- The task bar ----------
 *
 * The bar is the dark glass, with white text. It keeps its height and its
 * edges: the edge at the top becomes a light line, and a dark line stands over
 * it.
 */
html[data-theme="aero"] #taskbar {
	color: #ffffff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	background:
		linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.16)),
		var(--aero-bar-glass);
	border-top-color: rgba(255, 255, 255, 0.3);
	border-bottom-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/*
 * The button of a window is glass. The button of the window in front is
 * lighter, and the button under the mouse pointer is between the two.
 */
html[data-theme="aero"] .task-btn {
	border-radius: 2px;
	background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1));
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
html[data-theme="aero"] .task-btn:hover {
	background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2));
}
html[data-theme="aero"] .task-btn.active {
	background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.3));
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
/* The start button is blue glass, in the color of the start button of
   Windows 7. It becomes brighter under the mouse pointer. */
html[data-theme="aero"] #start-btn {
	border-radius: 2px;
	background: var(--aero-start);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 0 0 2px var(--aero-start-inner);
}
html[data-theme="aero"] #start-btn:hover {
	background: var(--aero-start-hover);
}
html[data-theme="aero"] #start-btn:active {
	background: var(--aero-start-pressed);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 0 0 2px var(--aero-start-pressed-inner);
}
/* The tray stands on the glass, and a line divides it from the buttons. */
html[data-theme="aero"] #tray {
	background: transparent;
	box-shadow:
		inset 1px 0 0 rgba(0, 0, 0, 0.35),
		inset 2px 0 0 rgba(255, 255, 255, 0.15);
}
html[data-theme="aero"] #fullscreen-btn:hover,
html[data-theme="aero"] #clock:hover {
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html[data-theme="aero"] #fullscreen-btn:active {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/*
 * The calendar of the tray. The frame is glass, in the way of a window, and
 * the days stand on the color of a window with a dark line around them.
 */
html[data-theme="aero"] #calendar {
	color: var(--window-text);
	background:
		linear-gradient(var(--window), var(--window)) no-repeat content-box,
		linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45))
			-1px -1px / calc(100% + 2px) calc(100% + 2px)
			no-repeat content-box padding-box,
		linear-gradient(var(--aero-shine-top), var(--aero-shine-caption)),
		var(--aero-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 0 var(--aero-edge-light),
		2px 3px 12px rgba(0, 0, 0, 0.45);
}
/* The two arrows stand flat on the white field, and they get a blue box under
   the mouse pointer. */
html[data-theme="aero"] .cal-nav {
	background: transparent;
	box-shadow: none;
}
html[data-theme="aero"] .cal-nav:hover {
	background: var(--btn-face-hover);
	box-shadow: inset 0 0 0 1px var(--aero-field-hover);
}
html[data-theme="aero"] .cal-nav:active {
	background: var(--aero-nav-pressed);
	box-shadow: inset 0 0 0 1px var(--aero-field-focus);
}

/*
 * ---------- The start menu ----------
 *
 * The whole start menu is the dark glass of the task bar, with white text: the
 * name of the site, the entries and Shut Down. An entry under the mouse pointer
 * gets a light glass. The menu keeps each size.
 */
html[data-theme="aero"] .start-menu {
	color: #ffffff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	background:
		linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08) 50px, rgba(255, 255, 255, 0.04)),
		var(--aero-bar-glass);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.6),
		2px 3px 12px rgba(0, 0, 0, 0.5);
}
/*
 * The browser makes the page behind the menu unclear. That step stands on a
 * layer under the entries, and not on the menu itself: an element with that
 * step is a limit for each glass in it. The list of a folder stands outside of
 * the menu, and it could then show only an empty glass.
 */
html[data-theme="aero"] .start-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
html[data-theme="aero"] .start-header {
	background: transparent;
	color: #ffffff;
	border-bottom-color: rgba(0, 0, 0, 0.35);
}
/* This rule also holds for an entry in the list of a folder. */
html[data-theme="aero"] .start-menu .start-item:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html[data-theme="aero"] .start-separator {
	background: rgba(0, 0, 0, 0.3);
	border-top-color: rgba(255, 255, 255, 0.2);
}

/*
 * ---------- The menus ----------
 *
 * The menu bar of a window and the list of a menu are the dark glass of the
 * start menu, with white text. The same glass holds the list of a folder in
 * the start menu. A title or a line under the mouse pointer gets a light
 * glass, in the way of an entry of the start menu. Each bar and each list
 * keeps its size.
 *
 * The menu bar needs no glass of its own: the glass of the window lies behind
 * it (see --aero-client-top), and the bar adds only its dark color.
 */
html[data-theme="aero"] .menubar {
	color: #ffffff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	background:
		linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
		var(--aero-bar-glass);
	border-bottom-color: rgba(0, 0, 0, 0.5);
}
html[data-theme="aero"] .menu-item:hover,
html[data-theme="aero"] .menu-item.open {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html[data-theme="aero"] .dropdown,
html[data-theme="aero"] .start-submenu {
	color: #ffffff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	background:
		linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
		var(--aero-bar-glass);
	border-color: rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.6),
		2px 3px 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="aero"] .dropdown-item:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* A line that the application cannot use now stays pale on the glass. */
html[data-theme="aero"] .dropdown-item.disabled,
html[data-theme="aero"] .dropdown-item.disabled:hover {
	color: rgba(255, 255, 255, 0.45);
	background: none;
	box-shadow: none;
}
html[data-theme="aero"] .dropdown-separator {
	border-top-color: rgba(0, 0, 0, 0.35);
	border-bottom-color: rgba(255, 255, 255, 0.2);
}