@keyframes gkDownloadShelfShow {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		margin-block-end: calc(var(--gkdownload-shelf-height) * -1);
	}
	100% {
		clip-path: polygon(0 -800%, 100% -800%, 100% 100%, 0 100%);
		margin-block-end: 0;
	}
}

@keyframes gkDownloadShelfHide {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		margin-block-end: 0;
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		margin-block-end: calc(var(--gkdownload-shelf-height) * -1);
	}
}

@keyframes gkDownloadItemStart {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}	

@keyframes gkDownloadItemBegin {
	0% {
		opacity: 1;
		top: -230px;
	}
	100% {
		opacity: 0;
		top: -135px;
	}
}

@property --gkDownloadItemProgressIntermediateDeg {
	syntax: '<angle>'; /* its type */
	inherits: false;
	initial-value: 0deg; /* the initial value */
}

@keyframes gkDownloadItemProgressIntermediate {
	to {
		--gkDownloadItemProgressIntermediateDeg: 360deg;						
	}
}

@keyframes gkDownloadItemProgressDone {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

:root {
	--gkdownload-shelf-height: 43px;
	// --gkdownload-shelf-border-color: #D6D6D6;
	--gkdownload-shelf-background: var(--default-gkdownload-shelf-background);
	--gkdownload-shelf-foreground-color: var(--default-gkdownload-shelf-foreground-color);
	--gkdownload-shelf-animation-toggle-duration: .1s;

	--gkdownload-shelf-list-margin-inline: 3px;
	--gkdownload-shelf-list-margin-block-start: 2px;
	--gkdownload-shelf-list-margin-block-end: 3px;
	--gkdownload-shelf-list-gap: 2px;

	--gkdownload-item-animation-begin-duration: .8s;
	--gkdownload-item-animation-grow-duration: 2s;
	--gkdownload-item-box-shadow-normal: 0px 0px 0px 1px rgba(0,0,0,.025);
	--gkdownload-item-box-shadow-hot: var(--gkdownload-item-box-shadow-normal);
	--gkdownload-item-box-shadow-active: 0px 0px 0px 0px transparent;
	--gkdownload-item-border-radius: 6px;
	--gkdownload-item-height: 36px;
	--gkdownload-item-max-width: 206px;
	--gkdownload-item-border-width: 1px;
	--gkdownload-item-border-block-start-color-normal: rgba(0,0,0,.14);
	--gkdownload-item-border-block-end-color-normal: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-inline-start-color-normal: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-inline-end-color-normal: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-block-start-color-hot: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-block-end-color-hot: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-inline-start-color-hot: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-inline-end-color-hot: var(--gkdownload-item-border-block-start-color-normal);
	--gkdownload-item-border-block-start-color-active: rgba(0,0,0,.18);
	--gkdownload-item-border-block-end-color-active: rgba(189,189,189,.45);
	--gkdownload-item-border-inline-start-color-active: var(--gkdownload-item-border-block-start-color-active);
	--gkdownload-item-border-inline-end-color-active: var(--gkdownload-item-border-block-end-color-active);
	--gkdownload-item-background-normal: linear-gradient(
		to bottom,
		rgba(255,255,255,.3),
		rgba(238,245,252,.3)
	);
	--gkdownload-item-background-hot: linear-gradient(
		to bottom,
		rgba(255,255,255,.4),
		rgba(248,250,255,.4)
	);
	--gkdownload-item-main-background-active: linear-gradient(
		to bottom,
		rgba(255,255,255,.2),
		rgba(240,245,255,.2)
	);
	--gkdownload-item-inset-border-width: 1px;
	--gkdownload-item-inset-border-block-start-color-normal: rgba(255,255,255,.21);
	--gkdownload-item-inset-border-block-end-color-normal: transparent;
	--gkdownload-item-inset-border-inline-start-color-normal: var(--gkdownload-item-inset-border-block-start-color-normal);
	--gkdownload-item-inset-border-inline-end-color-normal: transparent;
	--gkdownload-item-inset-border-block-start-color-hot: rgba(255,255,255,.3);
	--gkdownload-item-inset-border-block-end-color-hot: transparent;
	--gkdownload-item-inset-border-inline-start-color-hot: var(--gkdownload-item-inset-border-block-start-color-hot);
	--gkdownload-item-inset-border-inline-end-color-hot: transparent;
	--gkdownload-item-inset-border-block-start-color-active: rgba(0,0,0,.035);
	--gkdownload-item-inset-border-block-end-color-active: rgba(255,255,255,.5);
	--gkdownload-item-inset-border-inline-start-color-active: var(--gkdownload-item-inset-border-block-start-color-active);
	--gkdownload-item-inset-border-inline-end-color-active: var(--gkdownload-item-inset-border-block-end-color-active);
	--gkdownload-item-progress-pie-width: 30px;
	--gkdownload-item-progress-pie-height: var(--gkdownload-item-progress-pie-width);
	--gkdownload-item-progress-pie-background: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/progress_bg.svg");
	--gkdownload-item-progress-pie-mask: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/progress_mask.svg");
	--gkdownload-item-progress-color: #8FDF5F;
	--default-gkdownload-item-name-color: var(--gkdownload-shelf-foreground-color);
	--gkdownload-item-name-color: var(--default-gkdownload-item-name-color);
	--gkdownload-item-description-color-normal: #556C9A;
	--gkdownload-item-description-color-hot: #96A4C2;
	--gkdownload-item-description-color-active: #8899BA;
	--gkdownload-item-separator-border-inline-start-color-normal: rgba(0,0,0,.06);
	--gkdownload-item-separator-border-inline-start-color-hot: rgba(0,0,0,.12);
	--gkdownload-item-separator-border-inline-start-color-active: rgba(0,0,0,.06);
	--gkdownload-item-separator-border-inline-end-color-normal: rgba(255,255,255,.06);
	--gkdownload-item-separator-border-inline-end-color-hot: rgba(255,255,255,.09);
	--gkdownload-item-separator-border-inline-end-color-active: rgba(0,0,0,.01);
	--gkdownload-item-more-width: 15px;
	--gkdownload-item-more-height: inherit;
	--gkdownload-item-more-icon-color: #516D9F;
	--gkdownload-item-transition-duration: .1s;

	--gkdownload-shelf-close-color-normal: #454B51;
	--gkdownload-shelf-close-color-hot: #2B2E32;
	--gkdownload-shelf-close-color-active: #111214;

	/*
		Chromium Themes
	*/
	&[gkthemed][gkchrthemed] {
		&[gkchrthemehasdownloadshelf] {
			--gkdownload-shelf-background: var(--chrtheme-downloadshelf, var(--default-gkdownload-shelf-background));
			--gkdownload-shelf-foreground-color: var(--chrtheme-bookmark-text, var(--default-gkdownload-item-name-color));
			--gkdownload-item-name-color: var(--gkdownload-shelf-foreground-color);
		}
	}

	/*
		LightWeight (aka Firefox) Themes
	*/
	&[gkthemed]:not([gkchrthemed]) {
		--gkdownload-shelf-background: var(--gktoolbar-bgcolor, var(--toolbar-bgcolor, var(--default-gkdownload-shelf-background)));
		--gkdownload-shelf-foreground-color: var(--bookmark-item-color, var(--default-gkdownload-item-name-color));
		--gkdownload-item-name-color: var(--gkdownload-shelf-foreground-color);
	}

	&[sizemode="fullscreen"] {
		#gkDownloadShelf {
			display: none !important;
		}
	}
}

#gkDownloadShelf,
#gkDownloadList,
#gkDownloadActionButtons {
	display: flex;
}

#gkDownloadShelf {
	display: flex !important;
	box-sizing: border-box;
	height: var(--gkdownload-shelf-height);
	padding-inline-end: 16px;
	background: var(--gkdownload-shelf-background);

	pointer-events: none;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	margin-block-end: calc(var(--gkdownload-shelf-height) * -1);

	&[hidden="true"] {
		pointer-events: none;
		animation: gkDownloadShelfHide var(--gkdownload-shelf-animation-toggle-duration) ease-out forwards;
	}
	&[hidden="false"] {
		pointer-events: all	;
		animation: gkDownloadShelfShow var(--gkdownload-shelf-animation-toggle-duration) ease-out forwards;
	}

	button,
	toolbarbutton {
		margin: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
	}

	#gkDownloadActionButtons,
	.item > .main {
		button {
			appearance: none !important;
			background: transparent !important;
		}
	}

	#gkDownloadActionButtons button {
		border: 0 !important;
	}

	toolbarbutton {
		appearance: none !important;
	}
}

#gkDownloadList {	
	flex: 1;
	min-width: 0;
	margin-inline: var(--gkdownload-shelf-list-margin-inline);
	margin-block-start: var(--gkdownload-shelf-list-margin-block-start);
	margin-block-end: var(--gkdownload-shelf-list-margin-block-end);
	gap: var(--gkdownload-shelf-list-gap);

	> .item {
		position: relative;
		width: 0;
		height: var(--gkdownload-item-height);
		border-radius: var(--gkdownload-item-border-radius);
		align-items: center;
		max-width: var(--gkdownload-item-max-width);
		flex-shrink: 0;
		animation: gkDownloadItemStart var(--gkdownload-item-animation-grow-duration) ease-out forwards;

		&::before {
			content: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/download_animation_begin.png");
			position: absolute;
			top: -230px;
			opacity: 1;
			animation: gkDownloadItemBegin var(--gkdownload-item-animation-begin-duration) ease-out forwards;
			pointer-events: none;
		}

		// Intermediate Download Progress
		&:not([data-state])[style*="--gkdownload-progress: 0"] {
			.progress-container > .progress-mask {
				mask-image: conic-gradient(from var(--gkDownloadItemProgressIntermediateDeg), white 15%, transparent 15%);
				animation: gkDownloadItemProgressIntermediate 6s steps(32) infinite;
			}
		}

		&[data-state="canceled"],
		&[data-state="error"] {
			.progress-container > [class*="progress"] {
				display: none;
			}
		}

		&[data-state="done"] {
			.description {
				display: none;
			}

			.progress-container > [class*="progress"] {
				--gkdownload-progress: 100%;
				animation: gkDownloadItemProgressDone 2.5s linear forwards;
			}
		}

		&[data-state*="dangerous_not_malware"] {
			--gkdownload-item-max-width: 414px;
		}

		&[data-state*="dangerous_malware"] {
			--gkdownload-item-max-width: 276px;
		}

		&[data-state*="dangerous"] {
			--gkdownload-item-max-width: fit-content;

			.main {
				display: none;
			}
			.warning {
				display: flex;
			}
		}

		.main,
		.warning {
			width: 100%;
			height: 100%;
		}

		.main {
			label:not(.menu-text, .menu-iconic-text) {
				overflow: hidden;
				white-space: nowrap;
			}
		}

		.warning {
			display: none;
			height: 100%;		

			> .warning_not_malware,
			> .warning_malware {
				align-items: center;
				width: 100%;
				height: 100%;
				background: var(--gkdownload-item-background-normal);
				padding-inline: 7px;

				> image {
					margin-inline-end: 6px;
				}
	
				> label:not(.menu-text, .menu-iconic-text) {
					margin: 0 !important;
					margin-inline-end: 16px !important;
					white-space: pre-wrap;
					min-width: max-content;
				}
			}

			> .warning_not_malware {
				> image {
					list-style-image: url("chrome://userchrome/content/assets/img/chrome-5/toolbar/infobar_insecure.png");
					height: 18px;
					width: 18px;
				}
			}

			> .warning_malware {
				> image {
					list-style-image: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/safebrowsing_warning.png");
				}
			}
		}

		.warning-action-buttons {
			margin-inline-start: auto;
			gap: 7px;
		}
		
		.progress-container,
		.progress-container > [class*="progress"] {
			top: 0;
			left: 0;
			width: var(--gkdownload-item-progress-pie-width);
			height: var(--gkdownload-item-progress-pie-height);
			position: absolute;
			background-position: center;
			background-size: cover;
		}

		.progress-container {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			> .progress-bg {
				background-image: var(--gkdownload-item-progress-pie-background);
			}

			> .progress-mask {
				background-image: var(--gkdownload-item-progress-pie-mask);
				-moz-context-properties: fill, fill-opacity;
				fill: var(--gkdownload-item-progress-color);
				mask-image: conic-gradient(white var(--gkdownload-progress), transparent var(--gkdownload-progress));
			}

			> .icon {
				width: 16px;
				height: 16px;
				z-index: 1;
			}
		}

		.file-button,
		.more,
		.warning_not_malware,
		.warning_malware {
			border-width: var(--gkdownload-item-border-width) !important;
			border-style: solid !important;
			border-block-start-color: var(--gkdownload-item-border-block-start-color-normal) !important;
			border-block-end-color: var(--gkdownload-item-border-block-end-color-normal) !important;
			overflow: hidden !important;
			box-shadow: var(--gkdownload-item-box-shadow-normal);
		}

		.file-button,
		.more {
			position: relative;
			transition: border-color var(--gkdownload-item-transition-duration), box-shadow var(--gkdownload-item-transition-duration);

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-width: var(--gkdownload-item-inset-border-width);
				border-style: solid;
				border-block-start-color: var(--gkdownload-item-inset-border-block-start-color-normal);
				border-block-end-color: var(--gkdownload-item-inset-border-block-end-color-normal);
				border-inline-start-color: var(--gkdownload-item-inset-border-inline-start-color-normal);
				border-inline-end-color: var(--gkdownload-item-inset-border-inline-end-color-normal);
				transition: border-color var(--gkdownload-item-transition-duration);
			}

			> .background {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;

				~ * {
					z-index: 1;
				}

				> * {
					position: absolute;
					opacity: 0;
					width: 100%;
					height: 100%;
					
					transition: opacity var(--gkdownload-item-transition-duration);

					&.normal {
						opacity: 1;
						background: var(--gkdownload-item-background-normal);
					}

					&.hot {
						background: var(--gkdownload-item-background-hot);
					}
				}
			}

			&:not(
				[open="true"],
				:active
			) {
				&:hover {
					&::after {
						border-block-start-color: var(--gkdownload-item-inset-border-block-start-color-hot);
						border-block-end-color: var(--gkdownload-item-inset-border-block-end-color-hot);
						border-inline-start-color: var(--gkdownload-item-inset-border-inline-start-color-hot);
						border-inline-end-color: var(--gkdownload-item-inset-border-inline-end-color-hot);
					}

					border-block-start-color: var(--gkdownload-item-border-block-start-color-hot) !important;
					border-block-end-color: var(--gkdownload-item-border-block-end-color-hot) !important;
					box-shadow: var(--gkdownload-item-box-shadow-hot);

					> .background {
						> .normal,
						> .active {
							opacity: 0;
						}

						> .hot {
							opacity: 1;
						}
					}
				}
			}

			&:active,
			&[open="true"] {
				border-block-start-color: var(--gkdownload-item-border-block-start-color-active) !important;
				border-block-end-color: var(--gkdownload-item-border-block-end-color-active) !important;
				box-shadow: var(--gkdownload-item-box-shadow-active);
				transition: border-color 0s, box-shadow 0s;

				&::after {
					border-block-start-color: var(--gkdownload-item-inset-border-block-start-color-active);
					border-block-end-color: var(--gkdownload-item-inset-border-block-end-color-active);
					border-inline-start-color: var(--gkdownload-item-inset-border-inline-start-color-active);
					border-inline-end-color: var(--gkdownload-item-inset-border-inline-end-color-active);
					transition: border-color 0s;
				}

				> .background {
					> * {
						transition: opacity 0s;
					}

					> .normal,
					> .hot {
						opacity: 0;
					}

					> .active {
						opacity: 1;
					}
				}
			}
		}

		.file-button,
		.warning_not_malware,
		.warning_malware {
			border-top-left-radius: var(--gkdownload-item-border-radius) !important;
			border-bottom-left-radius: var(--gkdownload-item-border-radius) !important;
			border-inline-start-color: var(--gkdownload-item-border-inline-start-color-normal) !important;
		}

		.file-button,
		.warning_malware {
			border-inline-end-width: 0 !important;	
		}

		.file-button {
			height: 100%;
			padding-inline: 2px !important;
			justify-content: center;
			gap: 6px;
			align-items: center;
			min-width: 46px !important;

			&::after {
				pointer-events: none;
				border-top-left-radius: var(--gkdownload-item-border-radius);
				border-bottom-left-radius: var(--gkdownload-item-border-radius);
				border-inline-start-width: var(--gkdownload-item-inset-border-width);
				border-inline-start-style: solid;
			}

			&:not(:active) {
				&:hover {
					border-inline-start-color: var(--gkdownload-item-border-inline-start-color-hot) !important;
	
					.description {
						color: var(--gkdownload-item-description-color-hot);
					}
				}
			}

			&:active {
				border-inline-start-color: var(--gkdownload-item-border-inline-start-color-active) !important;
				box-shadow: var(--gkdownload-item-main-box-shadow-active);

				.description {
					color: var(--gkdownload-item-description-color-active);
				}
			}

			> .background > .active {
				background: var(--gkdownload-item-main-background-active);
				box-shadow: var(--gkdownload-item-main-box-shadow-active);
			}
			
			> .info {               
				overflow: hidden;
			}
		}

		.more,
		.warning_not_malware {
			border-top-right-radius: var(--gkdownload-item-border-radius) !important;
			border-bottom-right-radius: var(--gkdownload-item-border-radius) !important;
			border-inline-end-color: var(--gkdownload-item-border-inline-start-color-normal) !important;
		}

		.more {	
			border-inline-start-width: 0 !important;
			align-items: center;
			width: var(--gkdownload-item-more-width);
			height: var(--gkdownload-item-more-height);
			list-style-image: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/arrow.svg");
			-moz-context-properties: fill, fill-opacity;
			fill: var(--gkdownload-item-more-icon-color);

			&::after {
				border-top-right-radius: var(--gkdownload-item-border-radius);
				border-bottom-right-radius: var(--gkdownload-item-border-radius);
			}

			&:not([open="true"]) {
				&:hover {
					border-inline-end-color: var(--gkdownload-item-border-inline-end-color-hot) !important;

					> .separator {
						border-inline-start-color: var(--gkdownload-item-separator-border-inline-start-color-hot);
						border-inline-end-color: var(--gkdownload-item-separator-border-inline-end-color-hot);
					}
				}
			}
			
			&:active,
			&[open="true"] {
			border-block-start-color: var(--gkdownload-item-border-block-start-color-active) !important;
			border-block-end-color: var(--gkdownload-item-border-block-end-color-active) !important;
			border-inline-end-color: var(--gkdownload-item-border-inline-end-color-active) !important;

				> .separator {
					border-inline-start-color: var(--gkdownload-item-separator-border-inline-start-color-active);
					border-inline-end-color: var(--gkdownload-item-separator-border-inline-end-color-active);
					transition: border-color 0s;
				}
			}

			> .background > .active {
				background: var(--gkdownload-item-background-active);
			}

			> .separator {
				position: absolute;
				pointer-events: none;			
				left: 0;
				top: 1px;
				height: calc(100% - 2px);
				border-inline-start-width: 1px;
				border-inline-start-style: solid;
				border-inline-start-color: var(--gkdownload-item-separator-border-inline-start-color-normal);
				border-inline-end-width: 1px;
				border-inline-end-style: solid;
				border-inline-end-color: var(--gkdownload-item-separator-border-inline-end-color-normal);
				transition: border-color var(--gkdownload-item-transition-duration)
			}
			
			image {
				filter: drop-shadow(0px 1px 0px rgba(255, 255, 255, .75));
			}

			.toolbarbutton-text {
				display: none !important;
			}
		}

		.name,
		.warning_not_malware,
		.warning_malware {
			> label:not(.menu-text, .menu-iconic-text) {
				color: var(--gkdownload-item-name-color);
			}
		}

		label:not(.menu-text, .menu-iconic-text) {
			margin: 0 !important;
			text-overflow: ellipsis;
		}

		.name,
		.description {
			display: inherit;
		}

		.name > .format {
			flex-shrink: 0;
		}

		.description {
			color: var(--gkdownload-item-description-color-normal);

			> .size {
				flex-shrink: 0;
			}
		}
	}
}

#gkDownloadActionButtons {
	align-items: center;
	gap: 15px;
}

#gkDownloadShelfShowAll {
	list-style-image: var(--downloads-favicon);
	color: var(--gkdownload-shelf-foreground-color) !important;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;

	.button-box {
		gap: 5px;

		> * {
			margin: 0 !important;
		}
	}
}

#gkDownloadShelfToggle {
	width: 16px;
	height: 16px;
	list-style-image: url("chrome://userchrome/content/assets/img/chrome-1/downloadshelf/close.svg");
	-moz-context-properties: fill, fill-opacity;
	fill: var(--gkdownload-shelf-close-color-normal);
	transition: fill .1s;

	&:hover {
		fill: var(--gkdownload-shelf-close-color-hot);
	}

	&:active {
		fill: var(--gkdownload-shelf-close-color-active);
	}

	label {
		display: none;
	}
}