/* HACK: Custom Container vars do not propigate correctly
until the container tab is blurred and refocused, 
adding the data-identity-color with the default hex
value, or chrome url path as an alternate selector mitiages this bug.*/
[data-identity-color="blue"],
[data-identity-color="#00a7e0"] {
  --identity-tab-color: #37adff;
  --identity-icon-color: #37adff;
}

[data-identity-color="turquoise"],
[data-identity-color="#01bdad"] {
  --identity-tab-color: #00c79a;
  --identity-icon-color: #00c79a;
}

[data-identity-color="green"],
[data-identity-color="#7dc14c"] {
  --identity-tab-color: #51cd00;
  --identity-icon-color:  #51cd00;
}

[data-identity-color="yellow"],
[data-identity-color="#ffcb00"] {
  --identity-tab-color: #ffcb00;
  --identity-icon-color: #ffcb00;
}

[data-identity-color="orange"],
[data-identity-color="#f89c24"] {
  --identity-tab-color: #ff9f00;
  --identity-icon-color: #ff9f00;
}

[data-identity-color="red"],
[data-identity-color="#d92215"] {
  --identity-tab-color: #ff613d;
  --identity-icon-color: #ff613d;
}

[data-identity-color="pink"],
[data-identity-color="#ee5195"] {
  --identity-tab-color: #ff4bda;
  --identity-icon-color: #ff4bda;
}

[data-identity-color="purple"],
[data-identity-color="#7a2f7a"] {
  --identity-tab-color: #af51f5;
  --identity-icon-color: #af51f5;
}

[data-identity-icon="fingerprint"],
[data-identity-icon="chrome://browser/skin/usercontext/personal.svg"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#fingerprint");
}

[data-identity-icon="briefcase"],
[data-identity-icon="chrome://browser/skin/usercontext/work.svg"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#briefcase");
}

[data-identity-icon="dollar"],
[data-identity-icon="chrome://browser/skin/usercontext/banking.svg"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#dollar");
}

[data-identity-icon="cart"],
[data-identity-icon="chrome://browser/skin/usercontext/cart.svg"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#cart");
}

[data-identity-icon="circle"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#circle");
}

[data-identity-icon="gift"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#gift");
}

[data-identity-icon="vacation"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#vacation");
}

[data-identity-icon="food"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#food");
}

[data-identity-icon="fruit"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#fruit");
}

[data-identity-icon="pet"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#pet");
}

[data-identity-icon="tree"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#tree");
}

[data-identity-icon="chill"] {
  --identity-icon: url("resource://testpilot-containers/data/usercontext.svg#chill");
}

#userContext-indicator {
  height: 16px;
  list-style-image: none !important;
  width: 16px;
}

#userContext-label {
  margin-inline-end: 5px;
  color: var(--identity-tab-color) !important;
}

#userContext-icons {
  -moz-box-align: center;
}

.userContext-icon,
.menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon,
.subviewbutton[usercontextid] > .toolbarbutton-icon,
#userContext-indicator {
  background-image: var(--identity-icon) !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  fill: var(--identity-icon-color) !important;
  filter: url(/img/filters.svg#fill);
  filter: url(resource://testpilot-containers/data/filters.svg#fill);
}

/* containers experiment */

/* reset nightly containers */
.tabbrowser-tab[usercontextid] {
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: 0;
}

/* special styles run through a psuedo-class off of
these elements so they need to be relatively positioned.
these styles address both regular and compact themes,
special cases are addressed below */
.tabbrowser-tab[usercontextid] .tab-background-middle,
#main-window[style*='compact'] .tabbrowser-tab[usercontextid] .tab-content,
#verticaltabs-box .tabbrowser-tab[usercontextid] .tab-content {
  position: relative;
}

.tabbrowser-tab[usercontextid] .tab-background-middle::after,
#main-window[style*='compact'] .tabbrowser-tab[usercontextid] .tab-content::after {
  background-color: var(--identity-tab-color);
  bottom: 0;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 999;
}

.tabbrowser-tab[usercontextid] .tab-background-middle::after {
  background-color: var(--identity-tab-color);
  border-radius: 2px 2px 0 0;
  bottom: 1px;
  height: 3px;
}

.tabbrowser-tab[usercontextid]:not([visuallyselected="true"]) .tab-background-middle::after {
  bottom: 2px;
  height: 2px !important;
}

.tabbrowser-tab[usercontextid][pinned="true"] .tab-background-middle::after {
  left: -150%;
  width: 400%;
}

/* this fixes containers tab center */
#verticaltabs-box .tabbrowser-tab[usercontextid] .tab-content::after {
  background-color: var(--identity-tab-color);
  content: '';
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px !important;
  z-index: 999;
}

.tabs-newtab-button .toolbarbutton-icon[type="menu"] {
  margin-inline-end: 0;
}

.tabs-newtab-button .toolbarbutton-menu-dropmarker {
  display: none;
}

#new-tab-overlay {
  --icon-size: 26px;
  -moz-appearance: none;
  background: transparent;
  font-style: -moz-use-system-font;
  inline-size: 180px;
  margin-inline-start: -50px !important;
  visibility: visible;
}

#new-tab-overlay .panel-arrowcontent {
  -moz-appearance: none !important;
  background: none;
  border: 0;
  box-shadow: none;
  display: block;
  margin-block-end: 0;
  margin-block-start: 2px;
  padding-block-start: 0 !important;
}

#new-tab-overlay .panel-arrowcontent,
#new-tab-overlay menuitem {
  inline-size: 100%;
}

#new-tab-overlay .panel-arrowbox {
  display: none;
}

#new-tab-overlay[hidden=true] {
  display: none;
}

#new-tab-overlay menuitem {
  -moz-appearance: none;
  background: white;
  border-radius: 20px;
  border: 0;
  box-shadow: 0 0 7px #0004;
  color: #4b4b4b;
  margin-block-end: 5px;
  padding-block-end: 10px;
  padding-block-start: 10px;
  padding-inline-end: 10px;
  padding-inline-start: 10px;
}

#new-tab-overlay menuitem:hover {
  background: #f2f2f2;
}

#new-tab-overlay .menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon {
  block-height: var(--icon-size);
  block-width: var(--icon-size);
}

.menuitem-iconic[data-usercontextid] > .menu-iconic-left {
  visibility: visible;
}