// FIXME: Gtk can't render borders where the `border-image-source` is a gradient

/*
BEST PRACTICE
=============
 - Please keep layout information outside of .ui files and in the CSS

CSS Property order:
1. Layout
2. Style
3. Animation

*/

// https://github.com/khang-nd/7.css/

// @use "partials/variables" as *

.aero * {
	all: unset;
}

/* The window itself */

window.aero {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)), radial-gradient(300px /* So that the title remains equally visible when stretching */ 35% at 0% 0%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(27.72% 32.17% at 100% 0%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(30.29% 35.15% at 100% 100%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(25.16% 29.19% at 0% 100%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 15.48%, #FFFFFF 200px, rgba(255, 255, 255, 0) 201px);
	
	box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.5), -14px 8px 21px rgba(0, 0, 0, 0.5), inset 1px -1px 0px rgba(134, 255, 233, 0.69);

	border: 1px solid #FFFFFF;
	border-radius: 6px;

	padding: 6px;
	padding-top: 0px;

	&.maximized {
		border-radius: 2px;
	}

	&.fullscreen {
		padding: 0px;
		border-width: 0px;
	}

	&:not(:focus-within) {
		window-controls button {
			background: none;
			box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59);	// How do I remove the *other* shadow without having to copy this one?

			&.close {
				background: none;
			}
		}
	}

	/* Unset stuff set by the adwaita Default.css */
	> box {
		min-height: 0;
	}
}

// arrow {
// 	color: red;
// 	background-repeat: no-repeat;
// 	background-position: center;
// }

.aero {
	/* Default font */

	font-size: 12px;
	font-family: "Segoe UI";
	
	caret-color: black;
	transition: all 100ms linear;

	/* Generic style classes */

	.dark label:not(popover) {
		color: white;
		// font-weight: bolder;
	}

	.large-icons {
		-gtk-icon-size: 36px;
	}

	.normal-icons {
		-gtk-icon-size: 16px;
	}

	separator {
		min-width: 1px;
		min-height: 1px;
	}

	.linked {
		&.vertical > * {
			&:not(:last-child) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				border-bottom-width: 0;
			}
			&:not(:first-child) {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}
		}
		&.horizontal > * {
			&:not(:last-child) {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-right-width: 0;
			}
			&:not(:first-child) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
		}
	}

	@mixin nudge-contents
	{
		&:active > * {
			margin-top: 1px;
			margin-left: 1px;
			margin-bottom: -1px;
			margin-right: -1px;
		}
	}

	/* Aero stuff */

	/* Blur settings:
	* sigma = 10
	* brightness = 0.75
	* opacity = 255
	*/

	.window-content {
		border: 1px solid #000000;
		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.49), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.62);
		border-radius: 3px;

		// background: white;
		background: #F0F0F0;
	}

	/* Window controls */

	// :not(.content) label {
	// 	text-shadow: 0px 0px 16px #FFFFFF;
	// }

	windowhandle {
		padding-bottom: 5px;

		font-size: 12px;
	}

	window-controls {
		
		title-box {
			padding: 4px 1px 0px;
		}

		action-box-parent {
			border-spacing: 4px;
			box { border-spacing: inherit; }

			button {
				-gtk-icon-size: 16px;
				min-width: 14px;
				min-height: 14px;
			}

			separator {
				background: #516179;
				box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.34);

				min-width: 1px;

				margin: 2px 4px;
			}
		}

		> :first-child {
			border-radius: 0px 0px 0px 4px;
		}

		// The box with the 3 buttons
		buttons {
			border-radius: 0;

			/* Curves */
			> :first-child {
				border-bottom-left-radius: 3px;
			}

			> :last-child {
				border-bottom-right-radius: 3px;
			}
	
			/* Fill */
			> button {
				$refl-height: 8px;

				min-width:  25px;
				min-height: 17px;
				-gtk-icon-size: 12px;

				background: transparent; //linear-gradient(180deg, #FFFFFF 10.15%, rgba(255, 255, 255, 0.22) 10.16%, rgba(255, 255, 255, 0.22) 23.17%, rgba(255, 255, 255, 0.01) 40.58%, rgba(255, 255, 255, 0.03) 48.96%);
				border-width: 0px 1px 1px 1px;
				border-style: solid;
				border-radius: 0px;
				border-color: rgba(0, 0, 0, 0.64);
				box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59), inset 0px $refl-height 0px rgba(255, 255, 255, 0.43);
				
				transition: 200ms linear all;

				&:hover {
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 10.16%, rgba(255, 255, 255, 0.22) 23.17%, rgba(255, 255, 255, 0.01) 40.58%, rgba(255, 255, 255, 0.03) 48.96%), radial-gradient(54.23% 40% at 50% 95%, #0AFEFB 0%, rgba(10, 254, 251, 0) 100%), linear-gradient(180deg, #02558E 0%, #236EA4 100%);
					border-width: 0px 1px 1px 1px;
					border-style: solid;
					border-color: rgba(0, 0, 0, 0.64);
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59), inset 0px $refl-height 0px rgba(255, 255, 255, 0.43);
				}

				&:active {
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 10.16%, rgba(255, 255, 255, 0.22) 23.17%, rgba(255, 255, 255, 0.01) 40.58%, rgba(255, 255, 255, 0.03) 48.96%), radial-gradient(54.23% 40% at 50% 95%, #0AFEFB 0%, #16D6C5 0.01%, rgba(10, 254, 251, 0) 100%), linear-gradient(180deg, #04213F 0%, #194169 100%);
					border-width: 0px 1px 1px 1px;
					border-style: solid;
					border-color: rgba(0, 0, 0, 0.64);
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59), inset 0px $refl-height 0px rgba(255, 255, 255, 0.43);
				}

				&:not(:last-child) {
					border-right-width: 0;
				}	

				&.close {
					min-width:  45px;

					background: linear-gradient(180deg, #E8BBB4 0%, #CE8276 $refl-height, #BA4735 47.25%, #CF8479 100%);
					border-color: #5B3027;
					
					border-style: solid;
					border-width: 0px 1px 1px 1px;
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59);

					&:hover {
						// background: linear-gradient(0deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)), radial-gradient(110.58% 22.22% at 51.02% 94.44%, rgba(255, 230, 0, 0.2) 17.59%, rgba(255, 230, 0, 0) 100%), linear-gradient(270deg, #F1745E 0%, rgba(210, 34, 2, 0) 0.01%, #D22202 35.94%, rgba(210, 34, 2, 0.982301) 63.02%, rgba(210, 34, 2, 0) 100%), linear-gradient(180deg, #B34434 58.7%, #C47463 91.68%);
						background: radial-gradient(50% 30.67% at 50% 100%, #F6EE92 0%, rgba(229, 147, 77, 0) 100%), linear-gradient(180deg, #F1C0A0 0%, #E99181 46.28%, #D22302 46.63%, #E5934D 100%);
						border-width: 0px 1px 1px 1px;
						border-style: solid;
						border-color: #5B3027;
						// box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59), inset 0px 10px 0px rgba(255, 255, 255, 0.43);
					}

					&:active {
						background: linear-gradient(180deg, rgba(255, 255, 255, 0.2958) 0%, rgba(255, 255, 255, 0.261) 47.5%, rgba(255, 255, 255, 0) 47.5%), linear-gradient(270deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.15) 74.99%, rgba(0, 0, 0, 0.3) 100%), radial-gradient(50% 16.67% at 50% 100%, #F6EE92 0%, rgba(229, 147, 77, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), radial-gradient(50% 16.67% at 50% 100%, #F6EE92 0%, rgba(229, 147, 77, 0) 100%), linear-gradient(180deg, #E5934D 0%, #D22302 46.63%, #E5934D 100%);
						background-blend-mode: normal, normal, overlay, normal, overlay, normal;
						border-width: 0px 1px 1px 1px;
						border-style: solid;
						border-color: #5B3027;
						// box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.59), inset 0px 10px 0px rgba(255, 255, 255, 0.43);
					}
				}
			}
		}
	}

	/* Titlebar widget styling */

	label {
		color: black;
		text-shadow: 0px 0px 6px #FFFFFF;
		font-size: 12px;//10pt;
		font-weight: 400;
	}

	/* Global widget properties. These apply both in the normal window client area and in the glassy title bar. */

	.flat {
		background: transparent;
		border: 1px solid transparent;
		box-shadow: none;
	}

	label {
		&.heading {
			// This is used eg. in sidebars.

			font-weight: 700;
			font-style: normal;
			font-size: 12px;
		}

		> link {
			color: #0066CC;
			text-decoration: underline;
		}
	}

	// Generic traits shared between arrows inside all widgets
	arrow {
		// -gtk-icon-size: 16px;
		min-width: 8px;
		min-height: 8px;

		color: white;
		background-repeat: no-repeat;
		background-position: center;

		&.up {
			background: -gtk-recolor(url("resource:///com/github/albert-tomanek/aero/images/button_arrow_up.svg"));
		}
		&.down {
			background: -gtk-recolor(url("resource:///com/github/albert-tomanek/aero/images/button_arrow_down.svg"));
		}
		&.left {
			background: -gtk-recolor(url("resource:///com/github/albert-tomanek/aero/images/button_arrow_left.svg"));
		}
		&.right {
			background: url("resource:///com/github/albert-tomanek/aero/images/button_arrow_right.svg");
		}
	}
	

	button, scale slider {
		// General entry stuff (applies both inside and outside of .content)

		padding: 0px;
		
		&.text-button {
			min-width: 66px;
			min-height: 21px;

			padding: 1px 8px;
		}

		&.symbol-button {
			min-width: 16px;
			min-height: 16px;

			border-radius: 8px;
			font-weight: bold;
			font-size: 8px;
		}

		&.link label {
			color: #0066CC;
		}

		transition: background .2s, border-color .2s, box-shadow .2s;

		// Specific to outside of .window-content

		border-radius: 2px;
		border: 1px solid rgba(255, 255, 255, 0.33);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.14) 49.77%, rgba(255, 255, 255, 0.00) 51.26%), linear-gradient(180deg, rgba(0, 0, 0, 0.15) 61.26%, rgba(0, 0, 0, 0.00) 86.46%);
		box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.31);

		&:hover {
			border-color: rgba(255, 255, 255, 0.66);
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.14) 49.77%, rgba(255, 255, 255, 0.00) 51.26%), linear-gradient(180deg, rgba(0, 0, 0, 0.15) 61.26%, rgba(0, 0, 0, 0.00) 86.46%);
			box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.31), 0px 0px 2px 0px rgba(255, 255, 255, 0.85) inset;
		}

		&:active {
			border-color: rgba(0, 0, 0, 0.17);
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.14) 49.77%, rgba(255, 255, 255, 0.00) 51.26%), linear-gradient(180deg, rgba(0, 0, 0, 0.15) 61.26%, rgba(0, 0, 0, 0.00) 86.46%);
			box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.31);
		}
	}

	actionbutton {
		.heading {
			font-size: 11px;
			font-weight: bold;
		}
		
		arrow {	// The arrow
			min-width: 0;
			min-height: 0;

			-gtk-icon-size: 8px;
		}

		&.flat menubutton > button {
			// Erase any visual trace of the thing that actually makes the menubutton look like a button

			border: 1px solid rgba(0, 0, 0, 0);
			background: transparent;
			box-shadow: none;
		}

		&:hover menubutton {
			> button, button:hover, button:active {
				// @include yellow-hover;

				&:hover {
					// @include yellow-hover-lighter;
				}
	
				&:active {
					// @include yellow-pressed;
				}
			}
		}

		&.horizontal menubutton button {	// .linked won;t work here because it's nested
			margin: -1px;	// We don;t want the inner button and the menubutton both having a 1px border
			
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
			
		/* Layout */

		> button {
			min-width: 0;
			min-height: 0;
			padding: 0;
		}

		&.large {
			image {
				-gtk-icon-size: 36px;
				margin: 5px;
			}

			menubutton {
				min-width: 24px;
			}
		}

		&.normal {
			image {
				-gtk-icon-size: 16px;
				margin: 2px;
			}
		}

		&.horizontal {
			label {
				margin: 2px 2px;
			}
		}

		&.vertical {
			label {
				margin: 0 4px;
			}
		}
	}


	@mixin entry {
		// General entry stuff (applies both inside and outside of .content)

		min-height: 20px;

		placeholder {
			color: #6d6d6d;
			font-style: italic;
			font-family: "Segoe UI";
			font-size: 12px;
		}

		// Specific to outside of .content
		background: rgba(255, 255, 255, 0.65);
		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.33), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.78);
		border: 1px solid rgba(35, 35, 35, 0.7);
		border-radius: 3px;

		transition: 200ms linear;

		&:focus-within, &:hover {
			background: rgba(255, 255, 255, 0.90);
		}
	}

	entry {		
		@include entry;
		padding: 0 5px;
	}

	spinbutton {
		@include entry;

		text {
			padding: 4px;
		}

		button {
			-gtk-icon-size: 8px;
			min-height: 0px;
			min-width: 16px;

			&.down {	// I still can't believe we managed to trick Gtk to reposition widgets for us like this
				margin-top: 12px;

				> image {
					-gtk-icon-source: url("resource:///com/github/albert-tomanek/aero/images/button_arrow_down.svg");
				}
			}
			&.up {
				margin-left: -26px;
				margin-bottom: 12px;

				> image {
					-gtk-icon-source: url("resource:///com/github/albert-tomanek/aero/images/button_arrow_up.svg");
				}
			}
		}
	}

	menubar {
		border-bottom: 1px solid #BFC6D1;
		background: linear-gradient(180deg, #FCFFFF 0%, #E3E9F5 34.38%, #D5DCEC 34.38%, #E0E5F8 100%);		

		color: #1b1d23;

		> item {
			padding: 1px 6px 0px 6px;
			
			> label {
				padding: 0px 2px;
				border: 1px solid transparent;
			}
			&:selected > label {
				border-radius: 3px;
				border: 1px solid #575757;
				background: #CBD1E1;
				box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.25) inset;
			}
			&:selected {
				box-shadow: none;
			}
		}
	}

	

	/* Aero-specific widgets */

	orb {
		/* background: url("resource:///com/github/albert-tomanek/aero/images/orb_bg.png");
		filter: brightness(80%) contrast(180%) saturate(70%)
			drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4));
		border: 2px solid rgba(0, 0, 0, 0.2);
		border-radius: 24px; */
		border-radius: 35px;

		background: radial-gradient(80.21% 57.89% at 50% 100%, #3AC2F9 12.62%, #01155B 100%);
		box-shadow: 0px 0px 8px #ffffff00, inset 0px 0px 0px 1px rgba(182, 243, 255, 0.7);
		border: 0.5px solid #003AFF;

		transition: all 300ms linear;

		reflection {
			background: radial-gradient(87.27% 124.91% at 50% 101.96%, rgba(112, 203, 255, 0.38) 18.18%, #FFFFFF 91.85%);
		}

		&:hover, &:focus-visible {
			/* filter: brightness(80%) contrast(180%) saturate(180%) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 14px #49AFE2); */
	
			background: radial-gradient(80.21% 57.89% at 50% 100%, #3AC2F9 28.94%, #015EC3 100%);
			box-shadow: 0px 0px 8px #08A8EE, inset 0px 0px 0px 1px rgba(182, 243, 255, 0.7);
			border: 1px solid;
			border-image-source: linear-gradient(180deg, #00249D 0%, #424242 100%);
		}

		&:active {
			background: radial-gradient(80.21% 57.89% at 50% 100%, #3AC2F9 12.62%, #010633 77.24%);
			box-shadow: inset 0px 0px 0px 1px rgba(182, 243, 255, 0.7);
			border: 1px solid;
			border-image-source: linear-gradient(180deg, #00249D 0%, #424242 100%);
	
			reflection {
				background: radial-gradient(87.27% 124.91% at 50% 101.96%, rgba(112, 203, 255, 0.38) 18.18%, #FFFFFF 91.85%);
				box-shadow: inset 0px 0px 4px #000000;
			}
		}

		&:disabled {
			background: radial-gradient(80.21% 57.89% at 50% 100%, #D9E3EF 12.62%, #D7DFE7 77.24%);
			box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.7);
			border: 1px solid #929292;
			
			reflection {
				background: radial-gradient(87.27% 124.91% at 50% 101.96%, rgba(255, 255, 255, 0.38) 18.18%, #FFFFFF 91.85%);			
				border: 1px solid #4F4F4F;
			}

			&:not(.content) {	// The pale blue background looks bad atop transparent glass.
				// background: radial-gradient(80.21% 57.89% at 50% 100%, #999999 12.62%, #626262 77.24%);
				background: rgba(100, 100, 100, 0.3);
			}
		}
	}

	.orb-box {
		padding: 6px;
		background: radial-gradient(214.81% 97.06% at 62.5% 13.24%, rgba(170, 170, 170, 0) 0%, rgba(255, 255, 255, 0.83) 78.94%);
		border-radius: 33px;
	}

	navbuttons {
		box {
			border-spacing: 3px;
			padding: 1px;
		}

		recess /*:not(.content)*/ {
			background: linear-gradient(180deg, #A3A3A3ff 0%, #D9D9D900 100%);
		}
		// recess {
		// 	border: 1px solid red;	// Unfortunately, `Gtk.StyleContext.render_frame` only renders rectangular frames, and not around the provided path, so we can not draw a frame around the buttons.
		// }
	}

	/* Widget styles specific to when they are in the main window area (ie. not on the glassy window border.) */

	.window-content {
		@mixin yellow-hover-lighter {
			background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.44) 39.87%, rgba(255, 255, 255, 0.00) 39.88%), linear-gradient(180deg, #FFE999 67.32%, #FFFEAC 96.48%);
			box-shadow: 0px 0px 2px 2px #FFF inset;
		}

		@mixin yellow-hover {
			border-color: #FFB700;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.37) 39.87%, rgba(255, 255, 255, 0.00) 40.29%), linear-gradient(180deg, #FFB169 7.81%, #FFCE69 75%, #FFFEAC 96.48%);
			box-shadow: 0px 0px 2px 1px #FFF inset;
		}

		@mixin yellow-pressed {
			border-color: #C29B29;
			background: linear-gradient(180deg, #FFDCA0 0%, #FFD181 39.15%, #FFC45D 39.71%, #FFC45D 73.80%, #FFD781 100%);
			box-shadow: 0px 1px 2px 1px #D69E22 inset;
		}

		@mixin hover-gray {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.03) 100%);
			border: 1px solid #C6C6C6;
		}

		@mixin pressed-recess {
			border: 1px solid #C6C6C6;
			box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
		}

		notebook {
			$movement: 2px;

			> header.bottom tab {
				margin-bottom: $movement;
				border-top-width: 0;

				&:checked {
					margin-top: -1px;
					margin-bottom: 0px;
					> label {
						padding-top: $movement;
					}
				}
				&:not(:first-child) {
					margin-left: -1px;
				}
			}
			> header.top tab {
				margin-top: $movement;
				border-bottom-width: 0;

				&:checked {
					margin-bottom: -1px;
					margin-top: 0px;
					> label {
						padding-bottom: $movement;
					}
				}
				&:not(:first-child) {
					margin-left: -1px;
				}
			}

			> header.right tab {
				margin-right: $movement;
				border-left-width: 0;

				&:checked {
					margin-left: -1px;
					margin-right: 0px;
					> label {
						padding-left: $movement;
					}
				}
				&:not(:first-child) {
					margin-top: -1px;
				}
			}
			> header.left tab {
				margin-left: $movement;
				border-right-width: 0;

				&:checked {
					margin-right: -1px;
					margin-left: 0px;
					> label {
						padding-right: $movement;
					}
				}
				&:not(:first-child) {
					margin-top: -1px;
				}
			}

			> header tab {
				padding-top: 6px;
				padding-bottom: 4px;
				padding-left: 20px;
				padding-right: 20px;
				// min-width: 76px;
				// min-height: 20px;

				border-width: 1px;
				border-style: solid;
				
				background: linear-gradient(180deg, #F2F2F2 0%, #EBEBEB 50.49%, #DDDDDD 50.5%, #CFCFCF 100%);
				border-color: #898C95;
				box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.82);

				&:hover {
					background: linear-gradient(180deg, #F7FBFF 0%, #D1EAFF 50.49%, #B7DDFD 50.5%, #B7DDFD 100%);
					border-color: #5FA7E3;
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.82);
					
					transition: background .2s, border-color .2s;
				}
				&:checked {
					// padding-top: 7px;
					// padding-bottom: 5px;

					background: #ffffff;
					border-color: #898c95;
				}
			}

			> stack {
				border: 1px solid #898c95;

				background: #ffffff;
			}
		}

		notebook.ribbon, .ribbon > notebook {	// People can make their own Notebooks and style them with .ribbon if they don't fancy costrucing them with MenuModels
			@mixin tab-size {
				margin-top: 1px;
				min-width: 0;
				min-height: 2em;
				padding: 0px 12px;

				border-radius: 3px 3px 0px 0px;
				font-size: 12px;
			}

			> header {
				border-spacing: 2px;
				background: #DFE9F5;

				.appmenu-button > button {
					@include tab-size;

					margin-bottom: -1px;
					
					background: linear-gradient(180deg, #4884C1 5.28%, #2E68B2 45.35%, #1A4087 45.91%, #409ACF 100%);
					border: 1px solid #426ABD;
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
					color: white;

					&:hover, &:active {
						background: linear-gradient(180deg, #78b9ef 5.28%, #4884d1 45.35%, #114eaf 45.91%, #35BEFF 100%);
						box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.6);
					}
				}
			}

			> tabs {
				margin-left: 0;
			}

			tab {
				@include tab-size;

				background: transparent;
				border: 1px solid transparent;
				border-width: 1px 1px 0px 1px;

				&:checked {
					background: #F5FAFF;
					border-width: 1px 1px 0px 1px;
					border-style: solid;
					border-color: #BAC9DB;
					box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
				}
				&:not(:checked):hover {
					box-shadow: none;//adwaita
				}
			}

			> stack {
				min-height: 92px;

				background: linear-gradient(180deg, #F5FAFF 17.24%, #DCE7F5 100%);
				border-width: 0 0 1px 0;
				border-style: solid;
				border-color: #9FAEC2;

				section {
					> box {
						padding: 0px 8px;
						
						> label {
							margin-bottom: 2px;
							color: #738399;
						}

						> box {	// Content box
							padding: 8px 0px;
							border-spacing: 4px;

							> box.vertical {	// Any box inside that
								border-spacing: 3px;
							}
						}
					}

					separator {
						min-width: 1px;
						margin: 8px 0px;

						background: #a7b9d1;
						box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.50);
					}
				}

				.border {
					border-color: #a7b9d1;
				}
			}

			actionbutton > button:active {
				@include yellow-pressed;	// ABs behave flatly otherwise.
			}
		}

		appmenu {
			background-color: transparent;

			> contents {
				border-radius: 2px;
				border: 1px solid #8492A6;
				box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.33);

				// min-height: 435px;

				.top-bar {
					min-height: 24px;
					background: linear-gradient(180deg, #EEF3F9 0%, #EEF3F9 3.34%, #FCFEFF 4.59%, #E8F1FB 44.89%, #DEE8F5 45.19%, #DDE9F7 95.64%);
					border-bottom: 1px solid #ABB8C9;

					image {
						min-width: 54px;
						background: linear-gradient(180deg, #4882C0 0%, #2F63AE 44.89%, #1C438A 45.19%, #358BC9 95.94%);
					}
				}

				.bottom-bar {
					min-height: 16px;

					border-top: 1px solid #C9D5E7;
					background: linear-gradient(180deg, #FAFDFF 0%, #E2EAF9 100%);
				}

				.action-list {
					background: white;

					.scroll-button {
						min-height: 10px;
		
						-gtk-icon-size: 7px;
						border-radius: 1px;
						border: 1px solid #ACBCD3;
						background: linear-gradient(180deg, #FBFDFF 0%, #EBF1F9 38.76%, #DDE7F7 40.20%, #E6F6FF 74.07%, #FFF 89.16%);
		
						&:hover {
							@include yellow-hover-lighter;
						}
					}

					separator {
						margin-left: 44px;
						background-color: #CFDBEB;
					}
				}

				#recent {
					background: #EFF5FA;
					box-shadow: -1px 0px 0px 0px #CFDBEB, 1px 0px 0px 0px #FFF inset;
				}

				#recent .heading, subaction-overlay > .heading {
					padding: 6px 9px;

					background-color: #EFF5FA;
					box-shadow: 0px 1px 0px 0px #FFF, 0px -1px 0px 0px #CFDBEB inset;
					
					label {
						color: #4C607A;
						font-size: 11px;
						font-weight: bold;
					}
				}

				subaction-overlay {
					margin-top: 1px;
					margin-right: 4px;
					margin-bottom: 4px;
					margin-left: 0px;

					box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 1px #FFF inset;

					border: 1px solid #8492A6;
					border-radius: 2px;
				}
			}
		}

		actionbutton {
			/* Aesthetics (size-agnostic) */
			&.border > * {
				// When not being hovered over, display a border only if they have opted into this
				border-color: #a7b9d1;
			}

			&:hover {
				button, button:hover {
					@include yellow-hover;
				}
			}

			.heading {
				color: #4C607A;
			}
			
			&:hover menubutton {
				> button, button:hover, button:active {
					@include yellow-hover;

					&:hover {
						@include yellow-hover-lighter;
					}
		
					&:active {
						@include yellow-pressed;
					}
				}
			}
		}

		.optionbutton {
			&:active {
				color: #084BE5;
				.title-3 { color: #084BE5; }
			}
		}

		/* Text markup */

		.markup {
			.title-3, .heading {
				font-weight: 400;
				font-style: normal;
				font-size: 16px;
				letter-spacing: -0.006em;

				color: #003399;
				/* halign: GTK_ALIGN_START */
			}

			.body {
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
			}
		}

		/* Various types of boxes */

		:not(scrolledwindow) > .view:not(treeview):not(iconview) {		// Used by Gtk
			background: white;
			border: 1px solid #898c95;
		}

		.markup {
			padding: 19px 33px;
			border-spacing: 19px;//14pt;

			color: black;
			background: white;

			> box.horizontal, > grid {
				border-spacing: 6px;
			}

			> box.vertical {
				border-spacing: 19px;
			}

			/*
			natural-wrap-mode: GTK_NATURAL_WRAP_NONE
			wrape: true
			justify: GTK_JUSTIFY_FILL

			vexpand: true;
			halign: 
			*/

			> scrolledwindow, > columnview {
				border: 1px solid #303030;
				// border: 1px solid #000000;
			}
		}

		.dialog-footer, .dialog-action-box {
			padding: 10px 11px;
			border-spacing: 10px;
			
			background: #F0F0F0;
			box-shadow: inset 0px 3px 0px -2px rgba(0, 0, 0, 0.08);
		}

		.sidebar {
			background: white;
		}

		.dialog-action-area {
			border-spacing: 10px;
		}

		box.controlpanel-sidebar {
			$padding: 19px;
			min-width: 200px - 2*$padding;
			
			border-spacing: 8px;
			padding: $padding;
			padding-left: 28px;
			
			&.vista {
				label { color: white; }
				background: linear-gradient(180deg, #416EA7 0%, #6BB96E 100%);
			}
			
			// Default look is the Windows 7 look
			label {
				color: #2E2A61;

				&.link:hover {
					text-decoration: underline;
				}

				> link {
					color: inherit;	// This overwrites what would automatically apply (blue & underline), and sets it to whatever applies here in the parent context.
					text-decoration: inherit;
				}		
			}
			background: linear-gradient(39deg, rgba(255, 255, 255, 0.00) 53.91%, rgba(255, 255, 255, 0.37) 58.18%, rgba(255, 255, 255, 0.35) 75.11%, rgba(255, 255, 255, 0.00) 82.1%, rgba(255, 255, 255, 0.00) 85.08%, rgba(255, 255, 255, 0.29) 88.9%, rgba(255, 255, 255, 0.00) 98.14%), #E3EDFA;
		}	

		.statusbar {
			min-height: 26px;

			background: #F0F0F0;
			border-top: 1px solid #959595;
			box-shadow: inset -1px 0px 0px 1px #fefefe;

			> box {
				border-spacing: 8px;
				padding: 4px 8px;

				&:not(:last-child) {
					border-right: 1px solid #d7d7d7;
				}
			}
		}

		arrow {
			color: black;
		}

		headerbar {	/* actionbars seem to have this padding built in */
			padding: 4px;
			padding-bottom: 0;
		}

		actionbar, headerbar.titlebar {
			background: linear-gradient(180deg, #FAFCFD 0%, #E6F0FA 48.22%, #DCE6F4 49.51%, #DCE7F6 100%);
			box-shadow: inset 0px -2px 1px -1px rgba(0, 48, 74, 0.25);
			border-radius: 2px;

			&.dark {
				background: linear-gradient(180deg, rgba(116, 141, 204, 0.71) 4.77%, rgba(216, 227, 255, 0.18) 47.39%, rgba(255, 255, 255, 0.00) 47.40%), linear-gradient(180deg, #0F0F14 77.64%, #4C5E8B 92.02%);
				box-shadow: 0px 0px 0px 1px rgba(133, 133, 133, 0.84) inset, 0px -2px 0px 0px rgba(255, 255, 255, 0.61) inset, 0px -1px 0px 0px #000 inset;
			}

			> revealer > box {
				padding: 4px 10px;
			}
			
			button {
				@include nudge-contents;

				border-radius: 2px;
				border: 1px solid transparent;
				background: transparent;
				box-shadow: none;

				&.text-button {
					min-width:  50px;
					// min-height: 0;
				}

				&:not(.image-button) {
					padding-left: 10px;
					padding-right: 10px;
				}

				&:hover {
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(217, 217, 217, 0) 49.41%, rgba(0, 0, 0, 0.05) 50.33%, rgba(0, 0, 0, 0.04) 100%);
					border: 1px solid rgba(255, 255, 255, 0.44);
					box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.24);
				}

				&:active {
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(217, 217, 217, 0) 49.41%, rgba(0, 0, 0, 0.05) 50.33%, rgba(0, 0, 0, 0.04) 100%);
					background-blend-mode: luminosity;
					border: 1px solid rgba(255, 255, 255, 0.44);
					box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.24), inset 0px 1px 4px rgba(0, 0, 0, 0.25);
				}

				> box {
					border-spacing: 4px;
				}
			}
		}

		.document-background {
			background: #ced8e6;

			> :first-child {
				box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.3);
				margin: 5px;
			}
		}

		/* Normal widgets */

		label {
			text-shadow: none;
		}

		*:disabled label {
			color: #838383;
			text-shadow: 1px 1px 0px #FFFFFF;
		}

		button, scale slider {
			// padding: 0px 8px;
			border-radius: 3px;

			background: linear-gradient(180deg, #F6F6F6 0%, #EBEBEB 47.33%, #DDDDDD 47.73%, #CFCFCF 100%);
			border: 1px solid #707070;
			box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.81);

			&:hover {
				background: linear-gradient(180deg, #EAF6FD 10.11%, #D9F0FC 47.33%, #BEE6FD 47.34%, #A7D9F5 92.29%);
				border: 1px solid #3C7FB1;
				box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.81);
			}

			&:active, .aero &:checked:active {
				background: linear-gradient(180deg, #EAF6FD 9.24%, #C4E5F6 51.12%, #98D1EF 51.51%, #68B3DB 93.39%);
				border: 1px solid #3C7FB1;
				box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
			}

			&:checked {
				background: linear-gradient(180deg, #F4F4F4 9.24%, #DDDDDD 51.12%, #C4C4C4 51.51%, #A2A2A2 93.39%);
				border: 1px solid #777777;
				box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.7);
			}

			&:disabled {
				background: #F4F4F4;
				border: 1px solid #ADB2B5;
				box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.81);
			}

			&:focus-visible {
				background: linear-gradient(180deg, #F6F6F6 0%, #EBEBEB 47.33%, #DDDDDD 47.73%, #CFCFCF 100%);
				border: 1px solid #3C7FB1;
				box-shadow: inset 0px 0px 0px 1px #40D0F3;
			}

			&:focus-visible:hover {
				background: linear-gradient(180deg, #EAF6FD 10.11%, #D9F0FC 47.33%, #BEE6FD 47.34%, #A7D9F5 92.29%);
				border: 1px solid #3C7FB1;
				box-shadow: inset 0px 0px 2px 2px #2CD4FF;
			}
		}

		.flat {
			.heading { color: black; }	// FIXME: What's this for?
		}

		button.flat {
			background: transparent;
			border: 1px solid transparent;
			box-shadow: none;
		}

		linkbutton, optionbutton, button.flat {
			&:hover {
				@include hover-gray;
			}

			&:active {
				@include pressed-recess;
			}
		}
		linkbutton, optionbutton {
			&:active {
				color: #084BE5;

				.title-3 { color: #084BE5; }
			}
		}
		
		@mixin standard-entry {
			background: #FFFFFF;
			border: 1px solid #E5E8ED;
			box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.25);
			border-radius: 3px;
		}
		
		entry {
			@include standard-entry;
		}

		spinbutton {
			@include standard-entry;
		}

		combobox {
			// arrow {
			// 	padding: 0px 2px;
			// 	color: transparent;
			// 	background: url("resource:///com/github/albert-tomanek/aero/images/button_arrow_down.svg");
			// 	background-repeat: no-repeat;
			// 	background-position: center;
			// }

			.combo cellview {
				padding-left: 2px;
			}
			
			popover.menu contents {
				padding: 0px;
				border-radius: 0;

				// Inherit these from the generic popover menu
				// border: 1px solid #646464;
				// box-shadow: 5px 5px 3px -3px rgba(0, 0, 0, 0.5);
				background: white;

				.menu {
					margin-top: 0;
				}
		
				modelbutton.flat {
					padding: 2px 2px;
					min-height: 0px;
		
					color: black;
					font-size: 12px;
					background: white;
					border: none;
					border-radius: 0;
		
					&:hover {
						color: white;
						background: #3399FF;
						border: none;	// Override the default 'button' look
					}
				}
			}	
		}

		checkbutton {
			color: black;

			label {
				margin-left: 6px;
			}

			check {
				min-width:  12px;
				min-height: 12px;

				background: #E8E8E8;
				border: 1px solid #F4F4F4;
				border-radius: 0;
				box-shadow: 0px 0px 0px 1px #8E8F8F, inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08), inset 4px 4px 4px rgba(0, 0, 0, 0.15), inset -4px -4px 4px rgba(255, 255, 255, 0.8);

				color: transparent;
				background-position: center;
				-gtk-icon-source: -gtk-recolor(url(resource:///com/github/albert-tomanek/aero/images/check.svg));
				-gtk-icon-size: 12px;

				&:checked {
					color: #495F96;

					&:hover {
						color: #042271;
					}
				}

				&:hover, &:focus-visible, &:active {
					background: #C4EAFD;
					border: 1px solid #C4EAFD;
					box-shadow: 0px 0px 0px 1px #5586A3, inset 0px 0px 0px 1px #89D1F9, inset 4px 4px 4px rgba(0, 0, 0, 0.15), inset -4px -4px 4px rgba(255, 255, 255, 0.8);
				}

				&:disabled {
					background: #FBFBFB;
					border: 1px solid #FFFFFF;
					box-shadow: inset 0px 0px 0px 1px #ADB2B5, inset 0px 0px 0px 1px rgba(0, 0, 0, 0.03), inset 4px 4px 4px rgba(0, 0, 0, 0.1);

					&:checked {
						color: #BEBEBE;
					}
				}

				$dur: 50ms;
				transition: color $dur, background $dur, border $dur, box-shadow $dur;
			}
		}

		scale {
			padding: 4px;

			trough {
				border-radius: 1px;
				min-width: 3px;
				min-height: 3px;
				box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 1px -1px 1px 0px rgba(255, 255, 255, 1);
			}

			slider {
				margin: -12px 0px;
				min-width: 8px;
			}
		}

		.symbol-button + scale {	// I think this is for the scale slider
			padding-left: 0px;
			padding-right: 0px;
		}

		progressbar.horizontal {
			> trough {
				min-height: 25px;
				
				border-radius: 3px;
				border: 1px solid #ADADAD;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 2.27%, rgba(255, 255, 255, 0.86) 8.44%, rgba(255, 255, 255, 0.14) 31.16%, rgba(255, 255, 255, 0.00) 31.6%, rgba(255, 255, 255, 0.00) 68.59%, rgba(255, 255, 255, 0.45) 100%), linear-gradient(270deg, #ADADAD 0%, rgba(173, 173, 173, 0.00) 30px), linear-gradient(90deg, #ADADAD 0%, rgba(173, 173, 173, 0.00) 30px), #CBCBCB;
				box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.43) inset, 0px 1px 1px 0px rgba(0, 0, 0, 0.25);

				> progress {
					min-height: 25px;
					border-radius: 2px;
					margin: 1px 0px;
					border-color: #00D328;
					border-width: 0px 1px 1px 1px;
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 2.27%, rgba(255, 255, 255, 0.86) 8.44%, rgba(255, 255, 255, 0.14) 31.16%, rgba(255, 255, 255, 0.00) 31.6%, rgba(255, 255, 255, 0.00) 68.59%, rgba(255, 255, 255, 0.45) 100%), linear-gradient(270deg, #05B625 0%, rgba(5, 182, 37, 0.00) 30px), linear-gradient(90deg, #05B625 0%, rgba(5, 182, 37, 0.00) 30px), #00D328;
				}
			}
		}

		paned {
			> separator {
				background: lightgray;
			}
		}

		@mixin item {
			border: 0px solid transparent;
			border-radius: 3px;

			&:active, &:selected, &:selected:hover, &:focus {
				background: linear-gradient(180deg, #DDECFD 0%, #C2DCFD 96.21%);
				box-shadow: 0px 0px 0px 2px #EBF4FD inset, 0px 0px 0px 1px #7AA4CD inset;
			}				

			// Only for GridViews
			&:hover,
			&:focus {
				background: linear-gradient(180deg, #EEF5FE 0%, #E1EEFE 96.21%);
				box-shadow: 0px 0px 0px 2px #F5F9FE inset, 0px 0px 0px 1px #7AA4CD inset;
			}

			&.highlight {
				background: linear-gradient(180deg, #FDF1C0 0%, #FEC99C 96.21%);
				box-shadow: 0px 0px 0px 2px rgba(255, 253, 246, 0.55) inset, 0px 0px 0px 2px #F1BA90 inset;
			}
		}

		listview, list
		{
			background: white;
			padding: 0 1px;

			&.navigation-sidebar > separator {
				
			}

			row {
				@include item;
				$actual-gap: 3px;

				// for listview
				> cell {
					padding: $actual-gap;

					&:first-child {
						padding-left: $actual-gap + 2;
					}
					&:last-child {
						padding-right: $actual-gap + 2;
					}
				}

				// for list
				> revealer {
					padding: $actual-gap;

					> box {
						border-spacing: $actual-gap;
					}
				}
			}
		}

		columnview, treeview {
			background: white;

			> header {
				padding-left: 1px;
				> button {
					@include nudge-contents;

					border-radius: 0;
					// margin-left: -1px;
					padding: 3px 6px;
					
					border: 1px solid;
					border-right-color: #D5D6D8;
					border-bottom-color: #D5D6D8;
					border-left-color: transparent;
					border-top-color: transparent;
					background: linear-gradient(180deg, #FFF 0%, #FDFDFF 38.19%, #F9F9FB 38.67%, #EEEFF1 100%);

					&:hover {
						border-right-color: #96D9F9;
						border-bottom-color: #96D9F9;
						border-left-color: transparent;
						border-top-color: transparent;
						background: linear-gradient(180deg, #FCFCFC 0%, #F0F9FF 39.05%, #E2F0FB 39.06%, #D5F0F9 100%);
					}

					&:focus-visible {
						border-right-color: #93C9E3;
						border-bottom-color: #93C9E3;
						border-left-color: transparent;
						border-top-color: transparent;
						background: linear-gradient(180deg, #E3F7FF 0%, #E3F7FF 39.05%, #C2EEFF 39.06%, #B7E7FB 100%);
					}
				}
			}

			// https://github.com/GNOME/gtk/blob/6ad9db0bf0ed765903d8322cb02425830b227190/gtk/theme/Default/_common.scss#L3318

			&.column-separators > listview > row > cell {
				&:not(:first-child) {
					box-shadow: -1px 0px 0px 0px #D5D6D8;
				}
			}
		}

		/* Non-independent widgets */

		scrollbar {
			> range.vertical {
				> trough {
					background: #F0F0F0;
					border: 1px solid rgba(0, 0, 0, 0.03);
					box-shadow: -1px 0px 0px #F8F8F8, inset 5px 0px 8px -3px rgba(0, 0, 0, 0.1);

					> slider {
						min-width: 15px;
						background-position: center;
						background-repeat: no-repeat;

						background: linear-gradient(90deg, #F5F5F5 0%, #E9E9EB 49.21%, #D9DADC 49.75%, #C0C0C4 100%) /*url("resource:///com/github/albert-tomanek/aero/images/slider-grip-v.svg")*/;
						border: 1px solid #979797;
						box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.6);
						border-radius: 2px;

						&:hover {
							background: linear-gradient(90deg, #F5F5F5 0%, #D6EEFB 49.21%, #A9DBF6 49.75%, #A9DBF6 100%);
							border: 1px solid #356F9B;
							box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.8), inset 2px 2px 3px rgba(255, 255, 255, 0.25), inset -2px -2px 3px -1px rgba(0, 0, 0, 0.25);
						}

						&:active {
							background: linear-gradient(90deg, #B5E4F7 0%, #B5E4F7 49.21%, #6FCAF0 49.75%, #6FCAF0 100%);
							border: 1px solid #18598A;
							box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.25), inset -2px -2px 3px -1px rgba(0, 0, 0, 0.25);
						}
					}
				}
			}

			> range.horizontal > trough > slider {
				min-height: 15px;
			}
		}

		scrolledwindow {
			junction {
				min-width: 15px;
				min-height: 15px;
				
				background: #f0f0f0;
			}
		}
	}

	tooltip {
		background: linear-gradient(180deg, #FFFFFF 0%, #E5ECF7 100%);
		border: 1px solid #767676;
		box-shadow: 5px 3px 2px rgba(0, 0, 0, 0.23);
		border-radius: 2px;

		color: #4a4c4f;

		padding: 3px;
		box {
		}
	}

	popover {
		// Edit: Nope, not in Gtk4. || If you wanna see how to add icons to the menus, look here: https://zetcode.com/gui/gtk2/menusandtoolbars/

		/*
		box .vertical
			separator .horizontal
			box .vertical
				modelbutton .flat
					box .horizontal
						check .left
					label
					arrow .right
		*/

		&.menu {
			min-width: 200px;
		}

		separator {
			margin: 0px 2px;
			
			&.horizontal {
				min-height: 2px;
				margin-left: 32px;	// So that it doesn't go into the icon area
				background: linear-gradient(180deg, #E1E1E1 49.99%, #FFFFFF 50%);
			}
		}

		label {
			color: black;
			text-shadow: none;
		}

		label.separator.title {
			font-family: "segoe ui";
			font-size: 12px;
			font-weight: bold;
			padding: 2px 7px;
			margin-top: -1px;
			margin-bottom: 2px;

			background: #e8e8e8/*#e0e0e0*/;
			border-top: 1px solid white;
			border-bottom: 1px solid #c0c0c0;
			box-shadow: 0px 1px 0px 0px white, 0px -1px 0px 0px #e0e0e0/*#b8b8b8*/;
			// background: #e0e0e0;
			// color: #ffffff;
			// text-shadow: 1px 1px 0px #808080;

			opacity: 1;
		}

		modelbutton {
			padding: 0;
			margin: 0;

			min-width:  0px;
			min-height:  22px;

			font-size: 12px;
			font-family: "Segoe UI";

			&:hover {
				border: 1px solid #AECFF7;
				border-radius: 3px;

				background: linear-gradient(180deg, hsla(213, 80.0, 86.3, 0) 0%, hsla(213, 80.0, 86.3, 0.43) 96.21%);
				box-shadow: inset 0px 0px 0px 1px hsla(247, 100.0, 98.4, 0.84);

				> label {
					color: black;
				}
			}
			&:disabled
			{
				> label {
					color: gray;
				}

				&:hover {
					background: linear-gradient(180deg, hsla(213, 0, 86.3, 0) 0%, hsla(213, 0, 86.3, 0.43) 96.21%);
					box-shadow: inset 0px 0px 0px 1px hsla(0, 0%, 98%, 0.84);
				}
			}

			> label {
				padding: 0 4px;
			}

			> accelerator {
				color: gray;
			}

			> .right {
				padding-right: 4px;
			}

			> box {
				min-width:  30px;
				// min-height: 22px;

				> * {
					margin-left: 6px;
				}
			}
		}

		contents {
			padding: 2px;

			border-radius: 0;
			border: 1px solid #979797;
			box-shadow: 5px 5px 3px -3px rgba(0, 0, 0, 0.5);
			background: #F0F0F0;

			.menu {
				margin-top: 0;
			}
			
			scrolledwindow {
				background: linear-gradient(90deg, #F0F0F0 0px, #F0F0F0 30px, #E1E1E1 30px, #E1E1E1 31px, #FFF 31px, #FFF 32px, #F0F0F0 32px, #F1F1F1 100%);//#f0f0f0;
				// background: linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 30px, #F0F0F0 30px, #F1F1F1 100%);//#f0f0f0;
			}
		}
	}

	// Undo Adwaita.css

	listview {
		border: none;
		background: transparent;

		row {
			padding: 0;
			border: none;
		}
	}

	popover.menu {
		contents {
			scrolledwindow {
				border: none;
			}
		}
	}
}