
:root {
	// Make the Incognito indicator look like Chromium's
	#private-browsing-indicator-with-label,
	.private-browsing-indicator-with-label /* Fix for Firefox 133+ */ {
		margin-inline: unset !important;
		//#TabsToolbar-customization-target aligns items to end,
		// so we have to mimic it for Incognito to be consistent.
		align-self: end;
		// same with .toolbarbutton-1 for this:
		margin: 0 0 var(--tabs-navbar-shadow-size);
	}
	.private-browsing-indicator-icon {
		width: auto !important;
		height: auto !important;
	}
	[data-l10n-id="private-browsing-indicator-label"] {
		display: none !important;
	}
	#gkavatar-container > #gk-firefox-account-button,
	#private-browsing-indicator-with-label,
	.private-browsing-indicator-with-label /* Fix for Firefox 133+ */ {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		height: var(--tab-height);
		align-items: end !important;

		.toolbarbutton-badge-stack,
		.private-browsing-indicator-icon {
			background: transparent !important;
		}
	}
	// NOTE: Maximised state is handled by titlebar border styles.

	&[gkpeoplestyle="off"] {
		#gkavatar-container,
		#gkpeople-button-container,
		#gk-firefox-account-button {
			display: none !important;
		}
	}


	/*
		Avatar besides Tabs
	*/
	&:not([fxastatus="signedin"])[profilepic="firefox"],
	&[privatebrowsingmode="temporary"],
	&:not([gkpeoplestyle="avatar"]) { // Hide the account icon if in OffTheRecord, not in use, or if set to Firefox Account but not signed in yet
		#gkavatar-container {
			display: none !important;
		}
    }
	&[gkpeoplestyle="avatar"] {
		#gk-firefox-account-button #fxa-avatar-image {
			width: 38px !important;
			height: 32px !important;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: bottom;
		}
		&[profilepic="geckium"],
		&[profilepic="chromium"],
		&[profilepic="custom"] {
			// Firefox rounds pfps, so we gotta disable that.
			#gk-firefox-account-button #fxa-avatar-image {
				border-radius: unset !important;
			}
		}
		&[profilepic="geckium"],
		&[profilepic="firefox"] {
			// Sync the pfp width to prevent glaring inconsistencies
			#gk-firefox-account-button #fxa-avatar-image {
				width: 32px !important;
				margin: 0 3px; //...and add some spacing to even out. (6px)
			}
		}
		&[profilepic="chromium"],
		&[profilepic="custom"] {
			//list-style-image CAN'T use image 'fit' sizes,
			// so for Chromium and Custom pfps, we use background
			#gk-firefox-account-button #fxa-avatar-image {
				list-style-image: unset !important;
			}
		}

		// Profile Pictures
		&[profilepic="geckium"] {
			#gk-firefox-account-button #fxa-avatar-image {
				// list-style-image is used here for the fill-colour
				list-style-image: url("chrome://userchrome/content/windows/gsettings/imgs/logo.svg") !important;
			}
		}
		&[profilepic="chromium"] {
			$profile-pictures: 25; // bruni: Set the amount of profile pictures
			@for $i from 0 through $profile-pictures {
				&[profilepicchromium="#{$i}"] {
					#gk-firefox-account-button #fxa-avatar-image {
						background-image: url("chrome://userchrome/content/assets/img/profile/#{$i}.png") !important;
					}

					&:not([fxastatus="not_configured"]) panel toolbarbutton {
						&.subviewbutton,
						&.toolbarbutton-1 {
							&#fxa-manage-account-button::before {
								background-image: url("chrome://userchrome/content/assets/img/profile/#{$i}.png");
							}
						}
					}
					
				}
			}
		}
		&[profilepic="custom"] #gk-firefox-account-button #fxa-avatar-image {
			background-image: var(
				--custom-profile-picture,
				url(chrome://userchrome/content/assets/img/profile/0.png)
			);
		}
	}


    /*
		People Titlebar Button
	*/
	#gkpeople-button {
		appearance: none !important; // bruni: We disable the `.titlebar-buttonbox` apperance so it doesn't mask the People button.
		display: flex !important;
	}
	#toolbar-menubar[autohide="true"]:not([inactive]) ~ #TabsToolbar,
	&[privatebrowsingmode="temporary"],
	&:not([gkpeoplestyle="titlebutton"]) {
		#gkpeople-button-container {
			display: none !important;
		}
	}
    #gk-firefox-account-button {
        padding: 0 !important;
    }
    .gkpeople-titlebar {
        appearance: none !important;
		list-style-image: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/sign_in_button_avatar.svg");
    }
	.titlebar-buttonbox #gk-firefox-account-button .toolbarbutton-badge-stack #fxa-avatar-image {
		display: none;
	}
    
    // Show text when signed in and privacy setting disabled
	&[fxastatus="signedin"]:not([hideAccountInfo="true"]) .gkpeople-titlebar {
		.toolbarbutton-icon {
			display: none !important;
		}
		.toolbarbutton-text {
			display: flex !important;
		}
	}
}