%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif

#identity-box {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
  margin-inline-end: 4px;
  /* Set default fill for icons in the identity block.
     Individual icons can override this. */
  fill: currentColor;
  fill-opacity: .6;
  /* This is for tracking-protection-icon's slide-in animation. */
  overflow: hidden;
}

#identity-box:hover:not(.no-hover):not([open=true]) {
  background-color: hsla(0,0%,70%,.2);
  fill-opacity: .8;
}

#identity-box:hover:active:not(.no-hover),
#identity-box[open=true] {
  background-color: hsla(0,0%,70%,.3);
  fill-opacity: .8;
}

#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
  color: #058B00;
}
#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
%ifdef MOZ_OFFICIAL_BRANDING
  color: rgb(229,115,0);
%else
  color: inherit;
%endif
}

#identity-icon-labels:-moz-locale-dir(ltr) {
  padding-left: 4px;
}
#identity-icon-labels:-moz-locale-dir(rtl) {
  padding-right: 4px;
}
#identity-box:not(.chromeUI):not(.extensionPage) {
  --urlbar-separator-color: transparent;
}
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity {
  --urlbar-separator-color: rgba(18, 188, 0, .5);
}

#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage,
#urlbar-display-box {
  margin-inline-end: 8px;
  border-inline-end: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
  border-image-slice: 1;
}

#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage {
  padding-inline-end: 8px;
}

#urlbar-display-box {
  padding-inline-start: 4px;
  border-inline-start: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
  border-image-slice: 1;
}

#identity-icon,
#tracking-protection-icon,
#connection-icon,
.notification-anchor-icon,
#blocked-permissions-container > .blocked-permission-icon,
#extension-icon {
  width: 16px;
  height: 16px;
  margin-inline-start: 4px;
  -moz-context-properties: fill, fill-opacity;
}

/* MAIN IDENTITY ICON */
#identity-icon {
  margin-inline-start: 0;
  list-style-image: url(chrome://browser/skin/identity-icon.svg);
}

#identity-box.grantedPermissions > #identity-icon {
  list-style-image: url(chrome://browser/skin/identity-icon-notice.svg);
}

#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
}

#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
  list-style-image: url(chrome://browser/skin/search-glass.svg);
  fill-opacity: .4;
}

#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
}

/* SHARING ICON */

#sharing-icon {
  width: 16px;
  height: 16px;
  margin-inline-start: -16px;
  position: relative;
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
  display: none;
}

#identity-box[sharing="camera"] > #sharing-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
}

#identity-box[sharing="microphone"] > #sharing-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
}

#identity-box[sharing="screen"] > #sharing-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
}

#identity-box[sharing] > #sharing-icon {
  display: -moz-box;
  animation-delay: -1.5s;
}

#identity-box[sharing] > #identity-icon,
#sharing-icon {
  animation: 3s linear identity-box-sharing-icon-pulse infinite;
}

/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
@keyframes identity-box-sharing-icon-pulse {
  0%, 16.66%, 83.33%, 100% {
    opacity: 0;
  }
  33.33%, 66.66% {
    opacity: 1;
  }
}

/* TRACKING PROTECTION ICON */

#tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
  margin-inline-end: 0;
}

#tracking-protection-icon[state="loaded-tracking-content"] {
  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
}

#tracking-protection-icon[animate] {
  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
}

#tracking-protection-icon:not([state]) {
  margin-inline-end: -20px;
  pointer-events: none;
  opacity: 0;
  /* Only animate the shield in, when it disappears hide it immediately. */
  transition: none;
  list-style-image: none;
}

#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
  visibility: collapse;
}

/* CONNECTION ICON, EXTENSION ICON */

#connection-icon,
#extension-icon {
  visibility: collapse;
}
#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
  list-style-image: url(chrome://browser/skin/connection-secure.svg);
  visibility: visible;
  -moz-context-properties: fill;
  fill: #12BC00;
}
#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
  visibility: visible;
}

#urlbar[pageproxystate="valid"] > #identity-box.notSecure > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg);
  visibility: visible;
}

#identity-box.extensionPage > #extension-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
  visibility: visible;
}

/* REMOTE CONTROL ICON */

#main-window[remotecontrol] #remote-control-icon {
  list-style-image: url(chrome://browser/content/static-robot.png);
  visibility: visible;
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
}