/* 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/. */

:root {
  /* uei = unified extensions item */
  --uei-icon-size: 32px;
  --uei-attention-dot-size: 8px;
  --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor);
  --uei-button-hover-color: inherit;
  --uei-button-active-bgcolor: var(--panel-item-active-bgcolor);
  --uei-button-active-color: inherit;
  --uei-button-attention-dot-color: var(--attention-dot-color);
}

:root[uidensity="compact"] {
  --uei-icon-size: 24px;
}

#unified-extensions-panel {
  --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
  --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2));
}

#unified-extensions-view {
  width: var(--menu-panel-width-wide);
}

/* Align extensions rendered with custom elements. */
unified-extensions-item {
  display: flex;
  align-items: center;
}

unified-extensions-item > .subviewbutton {
  flex-shrink: 1;
}

#unified-extensions-panel .unified-extensions-item {
  -moz-context-properties: fill;
  fill: currentColor;
  /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */
  margin-block: 2px !important; /* override panelUI-shared.css */
}

.unified-extensions-item > .subviewbutton {
  margin: 0;
}

/* The "attention UI" for the unified extensions is based on:
 * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */

/* On the main unified extensions button, we draw the attention on the icon element. */
#unified-extensions-button[attention] > .toolbarbutton-icon,
/* For extension widgets placed in a toolbar, we use the stack element
 * (containing the icon) of the action button to draw the attention dot.
 * Otherwise (in the extensions panel), we use the action button itself. */
.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack,
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton {
  background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px);
  background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size);
  background-repeat: no-repeat;
}

/* Adjust attention dots position in the toolbar. */
#unified-extensions-button[attention] > .toolbarbutton-icon,
.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack {
  background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2);
}

/* Adjust attention dots position in the unified extensions panel. */
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton {
  background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel);
}

/* Adjust attention dots position in the unified extensions panel for RTL. */
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:-moz-locale-dir(rtl) {
  background-position-x: right var(--uei-dot-horizontal-position-in-panel);
}

.unified-extensions-item-action-button {
  flex: 1;
  overflow: hidden;
}

/* The padding-block for menuitems is set to 0 in compact mode which, with the
 * extension icon being 32px in this case, makes the item look crowded even for
 * compact mode. */
:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button {
  padding-block: 4px;
}

.unified-extensions-item-icon,
.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  height: var(--uei-icon-size);
  width: var(--uei-icon-size);
}

/* The first selector is for the custom elements icon, which appears only in the UEP. */
.unified-extensions-item-icon,
.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack {
  margin-inline-end: 6px;
}

.unified-extensions-item-icon,
.unified-extensions-item-contents {
  pointer-events: none;
}

.unified-extensions-item-name,
.unified-extensions-item-message {
  margin: 0;
  padding-inline-start: .5em;
  word-break: break-word;
}

.unified-extensions-item-message {
  color: var(--text-color-deemphasized);
}

.unified-extensions-item-menu-button.subviewbutton {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
  /* subtract the child's ~1px border from the block padding */
  padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px)
    var(--arrowpanel-menuitem-margin-inline);
  padding-inline-end: 0;
  border-radius: 0;
  /* override panelUI-shared.css */
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide subview label. */
.unified-extensions-item .toolbarbutton-text {
  display: none !important; /* override panelUI-shared.css */
}

.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
  box-sizing: content-box;
  padding: var(--arrowpanel-menuitem-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--arrowpanel-menuitem-border-radius);
}

/* Background color, outline, and shadow on the icon to allow the clickable
 * padding on the button to remain invisible */
.unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon {
  background-color: var(--uei-button-hover-bgcolor);
}

.unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon {
  background-color: var(--uei-button-active-bgcolor);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}

.unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
}

/* --- warning messages --- */

#unified-extensions-messages-container {
  margin: var(--arrowpanel-menuitem-margin);
}

.unified-extensions-message-bar {
  margin-bottom: 2px;
}

/* Hide the menu button and the unified extensions content when the extension
 * item is placed on the toolbar. */
.unified-extensions-item-menu-button.toolbarbutton-1,
.unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents {
  display: none;
}

/* --- browser action CUI widget styles in the extensions panel --- */

@media (prefers-contrast) {
  :root:not([lwtheme]) {
    --uei-button-attention-dot-color: ButtonText;

    .unified-extensions-item-action-button.subviewbutton:not([disabled]),
    .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
      border-color: currentColor;
      background-color: ButtonFace;
      color: ButtonText;
      --uei-button-hover-bgcolor: SelectedItem;
      --uei-button-hover-color: SelectedItemText;
      --uei-button-active-bgcolor: ButtonFace;
      --uei-button-active-color: ButtonText;
    }

    .unified-extensions-item-action-button[disabled].subviewbutton {
      background-color: Canvas;
      color: GrayText !important; /* override panelUI-shared.css */
      opacity: 1 !important; /* override panelUI-shared.css */
    }

    .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:active) {
      --uei-button-attention-dot-color: ButtonFace;
    }

    .unified-extensions-item-message {
      color: inherit;
    }

    .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled]),
    .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon {
      background-color: var(--uei-button-hover-bgcolor);
      color: var(--uei-button-hover-color);
      border-color: var(--uei-button-hover-bgcolor);
    }

    .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled]),
    .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon {
      background-color: var(--uei-button-active-bgcolor);
      color: var(--uei-button-active-color);
      border-color: var(--uei-button-active-color);
    }

    .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon {
      /* The border would otherwise overlap with the focus outline, causing an
       * unsightly anti-aliasing artifact */
      border-color: transparent;
    }
  }
}

/* Extra rule for tor-browser. See tor-browser#41581.
 * We want to hide the unified-extensions-button when it is empty.
 * However, this button is needed as an anchor for addon notifications. E.g.
 * when installing another addon and permissions pop up.
 * If we simply marked it as "hidden" then it would not be used as an anchor, so
 * the popup would fall back to using the identity button as an anchor instead.
 * So instead, we use "visibility: collapse" whilst it is empty *and* it is not
 * being used as an anchor (the open attribute is missing). */
#unified-extensions-button.hide-empty:not([open]) {
  visibility: collapse;
  /* Ensure getBoundingClientRect().width returns 0.
   * Even though this button is collapsed, and therefore should not take up any
   * layout space, getBoundingClientRect will still measure the padding.
   * If this was not zero, OverflowableToolbar#getOverflowInfo would
   * over-measure the children width and would always overflow. */
  padding-inline: 0;
}