+/* FxAccount indicator bits. */
+#appMenu-fxa-label,
+#appMenu-fxa-icon {
+ padding: 4px;
+ -moz-appearance: none;
+ box-shadow: none;
+ border-radius: 0;
+ border: 0 none;
+ -moz-box-orient: horizontal;
+ -moz-image-region: rect(0, 16px, 16px, 0);
+ list-style-image: url(chrome://browser/skin/syncFx-horizontalbar.png);
+}
+
+#appMenu-fxa-label {
+ -moz-box-flex: 1;
+ padding-inline-start: 12px;
+ margin: 0;
+}
+
+#appMenu-fxa-icon {
+ margin: 0 10px;
+}
+
+#appMenu-fxa-icon > .toolbarbutton-text {
+ display: none;
+}
+
+#appMenu-fxa-icon[syncstatus="active"] {
+ list-style-image: url(chrome://browser/skin/syncFxProgress-horizontalbar.png);
+}
+
+#appMenu-fxa-avatar {
+ pointer-events: none;
+ list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
+}
+
+#appMenu-fxa-container {
+ -moz-box-orient: horizontal;
+}
+
+/* Handle different UI states. */
+#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
+#appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
+#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
+#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
+ display: none;
+}
+
+#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
+ /* 12px space before the avatar, then 16px for the avatar */
+ padding-inline-start: 28px;
+ margin-inline-start: -28px;
+}
+#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
+ margin-inline-end: 10px;
+}
+
+#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
+ margin-inline-start: 12px;
+}
+
+#appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
+ -moz-appearance: none;
+ height: 24px;
+ margin: 0;
+ border: 0 none;
+ width: 1px;
+ /* Use background: rather than background-color: to override background-image
+ * styles on OS X */
+ background: var(--arrowpanel-dimmed);
+}
+
+/* Error states */
+#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
+#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
+ list-style-image: url(chrome://browser/skin/warning.svg);
+ -moz-image-region: rect(0, 16px, 16px, 0);
+}
+/*
+#appMenu-fxa-container[fxastatus="login-failed"],
+#appMenu-fxa-container[fxastatus="unverified"] {
+ background-color: var(--appmenu-yellow-warning-color);
+ border-top: 1px solid var(--appmenu-yellow-warning-border-color);
+ border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
+}
+
+#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
+#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
+ background-color: var(--appmenu-yellow-warning-hover-color);
+}
+
+#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
+#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
+ background-color: var(--appmenu-yellow-warning-active-color);
+}
+*/