%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 {
%ifdef MOZ_PHOTON_THEME
  padding: 0 5px;
%else
  font-size: .9em;
  padding: 3px 5px;
  /* The padding-left and padding-right transitions handle the delayed hiding of
     the forward button when hovered. */
  transition: padding-left, padding-right;
%endif
  /* 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;
}

%ifdef MOZ_PHOTON_THEME
#identity-box:hover:not(.no-hover):not([open=true]) {
  background-color: hsla(240,5%,5%,.05);
  fill-opacity: .8;
}

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

#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
%ifdef MOZ_PHOTON_THEME
  color: #058B00;
%else
  color: hsl(92,100%,30%);
%endif
}
#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: 2px;
}
#identity-icon-labels:-moz-locale-dir(rtl) {
  padding-right: 2px;
}
%ifdef MOZ_PHOTON_THEME
#identity-box:not(.chromeUI):not(.extensionPage) {
  --urlbar-separator-color: transparent;
}
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity {
  --urlbar-separator-color: rgba(18, 188, 0, .5);
}
%endif

#identity-box {
  padding-inline-end: 2px;
  margin-inline-end: 2px;
}

#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage,
#urlbar-display-box {
  margin-inline-end: 4px;
  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: 4px;
}

#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;
}

%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #identity-box {
  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
  /* Forward button hiding is delayed when hovered, so we should use the same
     delay for the identity box. We handle both horizontal paddings (for LTR and
     RTL), the latter two delays here are for padding-left and padding-right. */
  transition-delay: 100s, 100s;
}

@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
  /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px);
}
%endif

#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: 2px;
  -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);
}
%ifndef MOZ_PHOTON_THEME
#identity-box:not(.no-hover):hover > #identity-icon,
#identity-box[open=true] > #identity-icon {
  list-style-image: url(chrome://browser/skin/identity-icon-hover.svg);
}
#identity-box.grantedPermissions:not(.no-hover):hover > #identity-icon,
#identity-box.grantedPermissions[open=true] > #identity-icon {
  list-style-image: url(chrome://browser/skin/identity-icon-notice-hover.svg);
}
%endif

#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 {
  fill-opacity: .3;
}

#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
}

#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.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: -18px;
  pointer-events: none;
  opacity: 0;
  /* Only animate the shield in, when it disappears hide it immediately. */
  transition: 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;
%ifdef MOZ_PHOTON_THEME
  fill: #12BC00;
%else
  fill: #4d9a26;
%endif
}
#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.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://browser/skin/controlcenter/extension.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;
}
