& {
    .gkpeople-titlebar {
		display: flex !important;
		list-style-image: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/windows/win10/user_account_avatar.svg");

		background: transparent !important;
		border-radius: 0 !important;
		transition: background-color 100ms linear; //hover-fade animation
		height: 30px;
		min-width: 45px;
		color: var(--titlebar-button-foreground, inherit) !important;
		&:-moz-window-inactive {
			color: var(--titlebar-button-foreground-inactive, inherit) !important;
		}

		.toolbarbutton-icon {
			width: 14px;
			height: 14px;
		}

		.toolbarbutton-text {
            --stroke-color: rgba(0,0,0,.3);
            color: white !important;
            font-size: 8pt;

            margin-inline: 8px !important;
            text-shadow:	1px		1px		0	var(--stroke-color),
                            1px		-1px	0	var(--stroke-color),
                            -1px	1px		0	var(--stroke-color),
                            -1px	-1px	0	var(--stroke-color),
                            1px		0px		0	var(--stroke-color),
                            0px		1px		0	var(--stroke-color),
                            -1px	0px		0	var(--stroke-color),
                            0px		-1px	0	var(--stroke-color),
        }
		
		// Hover and pressed states
		&:not([disabled]):hover {
			background: color-mix(in srgb, currentColor 12%, transparent) !important;

			&:active {
				background: color-mix(in srgb, currentColor 22%, transparent) !important;
				transition: none;
			}
		}

		//Make the stroke actually visible
		-moz-context-properties: stroke !important;
		.toolbarbutton-icon {
			stroke: currentColor !important;
		}
	}

	&[sizemode="maximized"],
	&[sizemode="fullscreen"] {
		// Decrease button height before MD1
		&:not([geckium-sixtyeight]) .gkpeople-titlebar {
			height: 24px;
		}

		// Decrease button height during MD1
		&[geckium-sixtyeight] .gkpeople-titlebar {
			height: 29px;
		}
	}
}