& {
	--default-section-color: black;
	--section-color: var(--default-section-color);
	--default-spacer-background-color: rgb(229, 229, 229);
	--spacer-background-color: var(--default-spacer-background-color);

	--default-closed-section-button-color-normal: rgb(76, 76, 76);
	--closed-section-button-color-normal: var(--default-closed-section-button-color-normal);
	--default-closed-section-button-color-hot: black;
	--closed-section-button-color-hot: var(--default-closed-section-button-color-hot);

	--default-app-item-background-color-hot: rgb(229, 229, 229);
	--app-item-background-color-hot: var(--default-app-item-background-color-hot);

	@media (prefers-color-scheme: dark) {
		--section-color: white;
		--spacer-background-color: rgb(61, 61, 61);
	}

	// Custom theme support
	// lwtheme
	&[gkthemed]:not([gkchrthemed]) {
		--section-color: var(--newtab-text-primary-color, currentColor);
		--spacer-background-color: color-mix(in srgb, var(--lwt-accent-color) 70%, transparent);
		
		--closed-section-button-color-normal: var(--section-color);
		--closed-section-button-color-hot: var(--closed-section-button-color-normal);

		--app-item-background-color-hot: var(--spacer-background-color);
	}

	// chrtheme
	&[gkthemed][gkchrthemed] {
		--section-color: var(--chrtheme-ntp-text, var(--default-section-color));
		--spacer-background-color: var(--chrtheme-ntp-section, var(--default-spacer-background-color));

		--closed-section-button-color-normal: var(--section-color);
		--closed-section-button-color-hot: var(--closed-section-button-color-normal);

		--app-item-background-color-hot: var(--chrtheme-ntp-section);
	}

	// GTK+
	&[gksystheme="gtk"]:not([gkthemed], [gkchrthemed]) {
		--section-color: FieldText;
		--spacer-background-color: color-mix(in srgb, FieldText 20%, transparent);

		--recently-closed-item-color: -moz-dialogtext;

		--closed-section-button-color-normal: var(--section-color);
		--closed-section-button-color-hot: var(--closed-section-button-color-normal);
		
		--app-item-background-color-hot: var(--spacer-background-color);
	}
}

.sections .section {
	cursor: pointer;
	margin-inline-start: -14px;
	margin-inline-end: -21px;
	align-items: center;
	font-size: 12pt;
	color: var(--section-color);

	&:hover > .section-close-button {
		opacity: 1;
	}

	&.collapsed + div {
		display: flex;
		flex-direction: row;
		gap: 20px;

		.item {
			align-items: center;
			max-width: 114px;
			-moz-context-properties: fill, fill-opacity;
			fill: var(--recently-closed-item-color);

			.icon {
				display: none;
			}

			label {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.thumbnail-container {
			color: var(--link-color, --default-link-color);
		}
	}
	&:not(.collapsed) {
		+ div {
			display: grid;
			gap: 0px;
			grid-template-columns: repeat(6, minmax(0, 1fr));

			.item {
				border-radius: 10px;
				flex-direction: column;
				margin: 5px 3px;
				padding: 10px;
				height: 136px;
				width: 124px;
				text-decoration: none;
				transition: background-color .5s;
				color: var(--thumbnail-container-color);

				&:hover {
					background-color: var(--app-item-background-color-hot);
				}

				> .favicon {
					display: none;
				}

				> label {
					font-size: 10pt;
					text-align: center;
				}
			}
		}

		.disclosure {
			transform: rotate(90deg);
		}						
	}

	&.closed {
		display: none;

		+ div {
			display: none !important;
		}
	}

	+ div .item {
		display: flex;
		color: var(--link-color, --default-link-color);

		> .favicon {
			width: 16px;
			height: 16px;
			margin-inline-end: 3px;
		}

		> .icon {
			margin: auto;
			width: 96px;
			height: 96px;
		}
	}

	.disclosure {
		width: 9px;
		height: 9px;
		margin-inline-end: 5px;
		background-image: url("chrome://userchrome/content/pages/newTabHome/assets/chrome-11/imgs/accordion-chevron.svg");
		background-repeat: no-repeat;
		background-position: center;
		transition: transform .15s;
	}

	spacer {
		height: 1px;
		background-color: var(--spacer-background-color);
		margin-inline: 4px;
	}

	button {
		all: unset;
	}

	.section-close-button {
		width: 21px;
		height: 21px;
		opacity: 0;

		background-image: url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off.svg");
		background-repeat: no-repeat;
		background-position: center;

		transition: opacity .15s;
	
		&: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");
		}
	}
}

#apps-content,
#most-viewed-content,
#recently-closed-content {
	padding-block-start: 9px;
	margin-block-end: 30px;
}

#closed-sections-bar {
	width: 920px;

	position: fixed;
	justify-content: end;

	bottom: 14px;

	> [id*="-button"] {
		appearance: none;

		position: relative;

		border: 0;
		background: transparent;

		padding-block-start: 2px;
		margin-inline-start: 1.5em;
		font-size: 12pt;
		color: var(--closed-section-button-color-normal);

		&:hover {
			color: var(--closed-section-button-color-hot);
		}

		.close {
			display: flex;
		}
		&:not(.closed) {
			display: none;
		}

		&[open] > [id*="-menu"] {
			display: flex;
		}

		> * {
			display: inline-block;
		}

		> span {
			margin-inline-end: 6px;
		}

		> img {
			transform: rotate(90deg);
			position: relative;
			top: -2px;
			margin-inline-start: 1px;
		}

		> [id*="-menu"] {
			display: none;

			position: absolute;
			border: 1px solid rgba(0, 0, 0, .50);
			box-shadow: 0px 2px 4px rgba(0, 0, 0, .50);
			background: linear-gradient(to bottom, white, #EEE);
			padding-block: 8px;
			border-radius: 3px;

			bottom: 26px;
			right: 0;

			font-size: 10pt;

			> .item {
				display: flex;
				align-items: center;

				gap: 3px;

				min-width: max-content;
				color: #063874;
				text-align: start;
				padding-inline: 19px;
				height: 24px;

				text-decoration: underline;

				cursor: pointer;
			}

			> hr {
				border: 0;
				width: 100%;
				height: 1px;
				background: linear-gradient(to right, rgba(0, 0, 0, .10), rgba(0, 0, 0, .02) 96%);
				margin-block: 8px;
			}
		}
	}
}

&[geckium-choice="eleven"] {
	@media only screen and (max-width: 940px) {
		#closed-sections-bar {
			width: 692px;
		}
	}
}