& {
	--default-thumbnail-border-color: rgba(150, 150, 150, .3137254901960784);
	--thumbnail-border-color: var(--default-thumbnail-border-color);
	--default-thumbnail-inner-border-color: white;
	--thumbnail-inner-border-color: var(--default-thumbnail-inner-border-color);
	--default-thumbnail-wrapper-background-color-hot: rgba(150,150,150,1);
	--thumbnail-wrapper-background-color-hot: var(--default-thumbnail-wrapper-background-color-hot);

	@media (prefers-color-scheme: dark) {
		--default-thumbnail-inner-border-color: rgb(36, 36, 36);
		--default-thumbnail-background-color: #505050;
	}

	// Custom theme support
	// lwtheme
	&[gkthemed]:not([gkchrthemed]) {
		--thumbnail-border-color: color-mix(
			in srgb,
			var(--gktoolbar-bgcolor, var(--toolbar-bgcolor, var(--lwt-accent-color))) 31.37254901960784%,
			transparent
		);
		--thumbnail-border-color-hot: var(--gktoolbar-bgcolor, var(--toolbar-bgcolor, var(--lwt-accent-color)));
		--thumbnail-inner-border-color: color-mix(
			in srgb,
			var(--gktoolbar-bgcolor, var(--toolbar-bgcolor, var(--lwt-accent-color))) 50%,
			white
		);
		--thumbnail-wrapper-background-color-hot: var(--toolbar-bgcolor, var(--lwt-accent-color));
	}
	// chrtheme
	&[gkthemed][gkchrthemed] {
		--thumbnail-border-color: color-mix(
			in srgb,
			var(--chrtheme-ntp-header, var(--default-thumbnail-border-color)) 31.37254901960784%,
			transparent
		);
		--thumbnail-border-color-hot: var(--chrtheme-ntp-header, var(--default-thumbnail-border-color));
		--thumbnail-inner-border-color: var(--chrtheme-ntp-background, var(--default-thumbnail-inner-border-color));
		--thumbnail-wrapper-background-color-hot: var(--chrtheme-ntp-header, var(--default-thumbnail-border-color));
	}
	// GTK+
	&[gksystheme="gtk"]:not([gkthemed], [gkchrthemed]) {
		--thumbnail-inner-border-color: -moz-dialog;
	}

	&[geckium-choice="twentyone"],
	&[geckium-choice="twentyfive"] {
		@media only screen and (max-width: 1113px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 26px;
				}

				.tile {
					.most-visited {
						width: 204px;
						height: 159px;
					}
	
					.thumbnail {
						width: 202px;
						height: 126px;
					}
				}
			}
		}

		@media only screen and (max-width: 1073px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 24px;
				}

				.tile {
					.most-visited {
						width: 195px;
						height: 153px;
					}
	
					.thumbnail {
						width: 193px;
						height: 120px;
					}
				}
			}
		}

		@media only screen and (max-width: 1031px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 23px;
				}

				.tile {
					.most-visited {
						width: 185px;
						height: 147px;
					}
	
					.thumbnail {
						width: 183px;
						height: 114px;
					}
				}
			}
		}

		@media only screen and (max-width: 1020px) {
			#apps-page .tile-container {
				width: 120px;
				height: 120px;

				.icon {
					width: 96px;
					height: 96px;
				}
			}
		}

		@media only screen and (max-width: 991px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 21px;
				}

				.tile {
					.most-visited {
						width: 185px;
						height: 147px;
					}
	
					.thumbnail {
						width: 183px;
						height: 114px;
					}
				}
			}
		}

		@media only screen and (max-width: 982px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 21px;
				}

				.tile {
					.most-visited {
						width: 174px;
						height: 140px;
					}
	
					.thumbnail {
						width: 172px;
						height: 107px;
					}
				}
			}
		}

		@media only screen and (max-width: 938px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 20px;
				}

				.tile {
					.most-visited {
						width: 164px;
						height: 134px;
					}
	
					.thumbnail {
						width: 162px;
						height: 101px;
					}
				}
			}
		}

		@media only screen and (max-width: 898px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 19px;
				}

				.tile {
					.most-visited {
						width: 155px;
						height: 128px;
					}
	
					.thumbnail {
						width: 153px;
						height: 95px;
					}
				}
			}
		}

		@media only screen and (max-width: 856px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 18px;
				}

				.tile {
					.most-visited {
						width: 145px;
						height: 122px;
					}
	
					.thumbnail {
						width: 143px;
						height: 89px;
					}
				}
			}
		}

		@media only screen and (max-width: 813px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 17px;
				}

				.tile {
					.most-visited {
						width: 135px;
						height: 116px;
					}
	
					.thumbnail {
						width: 133px;
						height: 83px;
					}
				}
			}
		}

		@media only screen and (max-width: 770px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					gap: 16px;
				}

				.tile {
					.most-visited {
						width: 125px;
						height: 110px;
					}
	
					.thumbnail {
						width: 123px;
						height: 77px;
					}
				}
			}
		}

		@media only screen and (max-width: 754px) {
			#most-visited-page  {
				.tile-pos-grid,
				.tile-grid {
					grid-template-columns: repeat(2, minmax(0, 1fr));
					grid-template-rows: repeat(4, minmax(0, 1fr));
					gap: 16px;
				}
			
				.tile {
					.most-visited {
						width: 122px;
						height: 108px;
					}
	
					.thumbnail {
						width: 120px;
						height: 75px;
					}
				}
			}
		}

		@media only screen and (max-width: 751px) {
			#apps-page {
				.tile-pos-grid,
				.tile-grid {
					grid-template-columns: repeat(3, minmax(0, 1fr));
					grid-template-rows: repeat(3, minmax(0, 1fr));
				}

				.tile-container {
					width: 80px;
					height: 80px;

					.icon {
						width: 64px;
						height: 64px;
					}

					label {
						text-align: center;
					}
				}
			}
		}
	}

	&[pinineveryera="false"] .pin-button {
		display: none !important;
	}
}

#most-visited-page {
	.tile-pos-grid,
	.tile-grid {
		gap: 26px;

		transition-property: grid-template-columns, grid-template-rows, gap;
		transition-duration: .15s;
	}

	.tile {
		font-size: 10.5pt;
		text-align: center;
		
		.most-visited {
			display: block;
			position: relative;
			color: var(--thumbnail-container-color);
			width: 214px;
			height: 165px;
			text-decoration: none;

			transition-property: width, height;
			transition-duration: .15s;
	
			&:not([disabled]) {
				&:hover,
				&:focus,
				&:active {
					.thumbnail-shield {
						background: linear-gradient(
							to bottom,
							rgba(255, 255, 255, 0),
							rgba(255, 255, 255, 0) 80%,
							rgba(255, 255, 255, 0.9)
						);
	
						@media (prefers-color-scheme: dark) {
							background: linear-gradient(
								to bottom,
								rgba(114, 114, 114, 0),
								rgba(114, 114, 114, 0) 80%,
								rgba(114, 114, 114, 0.9)
							);
						}
					}
				}
	
				&:hover,
				&:focus {
					.thumbnail-wrapper {
						background-color: var(--thumbnail-wrapper-background-color-hot);
					}
					
					.pin-button,
					.close-button {
						opacity: 1;
						transition-delay: 500ms;
					}
	
					.thumbnail {
						opacity: .95;
					}
				}
	
				&:active {
					.pin-button:not(:active),
					.close-button:not(:active) {
						+ .thumbnail {
							opacity: .9;
	
							.thumbnail-shield {
								box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2);
							}
						}
					}
				}
			}
			&[disabled] {
				pointer-events: none;
		
				*:not(.thumbnail-wrapper, .thumbnail) {
					visibility: hidden;
				}
		
				.thumbnail {
					border-width: 1px;
					border-style: solid;
					border-color: var(--thumbnail-inner-border-color);
				}
			}
		}
	
		.thumbnail-wrapper {
			position: relative;
			background-color: var(--thumbnail-border-color);
			border: 1px solid transparent;
			border-radius: 3px;

			transition-property: background-color;
			transition-duration: 150ms;
		}
	
		.pin-button,
		.close-button {
			all: unset;
	
			position: absolute;
			width: 16px;
			height: 16px;
			cursor: default;
			opacity: 0;
			z-index: 1;

			transition-property: opacity;
			transition-duration: 150ms;
	
			&:hover,
			&:focus {
				transition: none;
			}
		}

		.pin-button {
			left: 0;
			background-image: url("chrome://userchrome/content/pages/newTabHome/assets/chrome-21/imgs/newtab_pin_off.svg");

			&:hover,
			&:focus {
				background-image: url("chrome://userchrome/content/pages/newTabHome/assets/chrome-21/imgs/newtab_pin_off_h.svg");
			}

			&:active {
				background-image: url("chrome://userchrome/content/pages/newTabHome/assets/chrome-21/imgs/newtab_pin_off_p.svg");
			}
		}

		&[pinned="true"] {
			.pin-button {
				background-image: url("chrome://userchrome/content/pages/newTabHome/assets/chrome-21/imgs/newtab_pin_off_p.svg");
			}
		}

		.close-button {
			right: 0;
			background-image: url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off.svg");
		
			&:hover,
			&:focus {
				background-image: url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off_h.svg");
			}

			&:active {
				background-image: url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off_p.svg");
			}
		}
	
		.thumbnail {
			position: relative;
			box-sizing: border-box;
			background: no-repeat;
			background-size: cover;
			background-position: top center;
			border-radius: 3px;
			height: 132px;
			width: 212px;

			transition-property: width, height;
			transition-duration: .15s;
		}
	
		.thumbnail-shield {
			position: absolute;
			width: 100%;
			height: 100%;
	
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 0),
				rgba(255, 255, 255, 0) 50%,
				rgba(255, 255, 255, 0.9)
			);
	
			@media (prefers-color-scheme: dark) {
				background: linear-gradient(
					to bottom,
					rgba(114, 114, 114, 0),
					rgba(114, 114, 114, 0) 50%,
					rgba(114, 114, 114, 0.9)
				);
			}
	
			border-radius: 3px;
		}
	
		.favicon {
			position: absolute;
			left: 0;
			bottom: 0;
			left: 5px;
			bottom: 7px;
		}
	
		.color-stripe {
			border-bottom-left-radius: 3px 3px;
			border-bottom-right-radius: 3px 3px;
			bottom: 23px;
			height: 3px;
			margin-bottom: 8px;
			position: absolute;
			width: 100%;
			z-index: 10;
		}
		
		.title {
			margin: 0;
			margin-block-start: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}