window.background.chromium {
	background-color: gtk("@theme_base_color");
	border-color: gtk("@borders");

	menubar,
	.menubar {
		color: gtk("@theme_fg_color");
		background-color: gtk("@theme_bg_color");
		&:backdrop {
			background-color: gtk("@theme_unfocused_bg_color");
			color: gtk("@theme_unfocused_fg_color");
		}
	}
	entry {
		background-color: gtk("@theme_base_color");
	}
	&.csd {
		menubar,
		.menubar {
			color: gtk("@theme_titlebar_foreground");
			background-color: gtk("@theme_titlebar_background");
			&:backdrop {
				background-color: gtk(
					"@theme_titlebar_background_backdrop"
				);
				color: gtk("@theme_titlebar_foreground_backdrop");
			}
		}
	}

	headerbar,
	.titlebar {
		button.titlebutton {
			&.close {
				color: transparent;
				background-image: -gtk-scaled(
					url("../assets/titlebutton-close.png"),
					url("../assets/titlebutton-close@2.png")
				);
				&:hover {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-close-hover.png"),
						url("../assets/titlebutton-close-hover@2.png")
					);
				}
				&:active {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-close-active.png"),
						url("../assets/titlebutton-close-active@2.png")
					);
				}
				&:backdrop {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-close-backdrop.png"),
						url("../assets/titlebutton-close-backdrop@2.png")
					);
				}
			}

			&.maximize {
				color: transparent;
				background-image: -gtk-scaled(
					url("../assets/titlebutton-maximize.png"),
					url("../assets/titlebutton-maximize@2.png")
				);
				&:hover {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-maximize-hover.png"),
						url("../assets/titlebutton-maximize-hover@2.png")
					);
				}
				&:active {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-maximize-active.png"),
						url("../assets/titlebutton-maximize-active@2.png")
					);
				}
				&:backdrop {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-maximize-backdrop.png"),
						url("../assets/titlebutton-maximize-backdrop@2.png")
					);
				}
			}
			&.minimize {
				color: transparent;
				background-image: -gtk-scaled(
					url("../assets/titlebutton-minimize.png"),
					url("../assets/titlebutton-minimize@2.png")
				);
				&:hover {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-minimize-hover.png"),
						url("../assets/titlebutton-minimize-hover@2.png")
					);
				}
				&:active {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-minimize-active.png"),
						url("../assets/titlebutton-minimize-active@2.png")
					);
				}
				&:backdrop {
					background-image: -gtk-scaled(
						url("../assets/titlebutton-minimize-backdrop.png"),
						url("../assets/titlebutton-minimize-backdrop@2.png")
					);
				}
			}
		}

		@at-root window.background.chromium.maximized headerbar,
			.maximized .titlebar {
			button.titlebutton {
				&.maximize {
					color: transparent;
					background-image: -gtk-scaled(
						url("../assets/titlebutton-maximize-maximized.png"),
						url("../assets/titlebutton-maximize-maximized@2.png")
					);
					&:hover {
						background-image: -gtk-scaled(
							url("../assets/titlebutton-maximize-maximized-hover.png"),
							url("../assets/titlebutton-maximize-maximized-hover@2.png")
						);
					}
					&:active {
						background-image: -gtk-scaled(
							url("../assets/titlebutton-maximize-maximized-active.png"),
							url("../assets/titlebutton-maximize-maximized-active@2.png")
						);
					}
					&:backdrop {
						background-image: -gtk-scaled(
							url("../assets/titlebutton-maximize-maximized-backdrop.png"),
							url("../assets/titlebutton-maximize-maximized-backdrop@2.png")
						);
					}
				}
			}
		}
	}
}
