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

/*
 * Override the default popover styles to ensure the panel-list
 * stays anchored to the element that opened it.
 */
:host([popover]) {
  margin: 0;
  inset: auto;
  /* Reset inline padding added by the UA [popover] rule so the panel aligns precisely. */
  padding-inline: 0;
}

:host([showing]) {
  visibility: hidden;
}

:host(:not([open])) {
  display: none;
}

:host {
  --panel-list-background-color: var(--background-color-box);
  --panel-list-color: var(--text-color);
  --panel-list-border-radius: var(--border-radius-small);
  --panel-list-box-shadow: var(--popup-box-shadow);
  --panel-list-border-color: var(--border-color-deemphasized);

  /* display: block ensures dimensions are available during setAlign()
     positioning, since the popover UA stylesheet hides [popover]:not(:popover-open). */
  display: block;
  position: absolute;
  font: menu;
  background-color: var(--panel-list-background-color);
  color: var(--panel-list-color);
  border-radius: var(--panel-list-border-radius);
  padding-block: var(--space-small);
  margin-block-end: var(--space-large);
  box-shadow: var(--panel-list-box-shadow);
  min-width: 12em;
  z-index: var(--z-index-popup, 10);
  white-space: nowrap;
  cursor: default;
  overflow-y: auto;
  box-sizing: border-box;
}

:host([has-submenu]) {
  overflow: visible;
}

:host(:not([slot="submenu"])) {
  max-height: 100%;
}

:host([stay-open]) {
  position: initial;
  display: inline-block;
}

:host([inxulpanel]) {
  position: static;
  margin: 0;
}

:host(:not([inxulpanel])) {
  border: 1px solid var(--panel-list-border-color);
}

.list {
  margin: 0;
  padding: 0;
}

::slotted(hr:not([hidden])) {
  display: block !important;
  /* This element is used like a border, so border tokens apply. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: var(--border-width) !important;
  background-color: var(--panel-list-border-color) !important;
  color: inherit !important;
  padding: 0 !important;
  margin-block: var(--space-small) !important;
  border: none !important;
}