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

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

:host {
  position: absolute;
  background: var(--in-content-box-background);
  border: 1px solid var(--in-content-box-border-color);
  border-radius: var(--panel-border-radius);
  padding: 6px 0;
  margin-bottom: 16px;
  box-shadow: var(--shadow-30);
  min-width: 12em;
  z-index: var(--z-index-popup, 10);
  white-space: nowrap;
  cursor: default;
}

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

.arrow {
  width: 18px;
  height: 9px;
  -moz-context-properties: fill, stroke;
  stroke: var(--in-content-box-border-color);
  fill: var(--in-content-box-background);
  background: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
  position: absolute;
}

:host([valign="bottom"]) > .arrow.bottom,
:host([valign="top"]) > .arrow.top {
  display: none;
}

.arrow.top {
  top: -9px;
}

.arrow.bottom {
  bottom: -9px;
  transform: scaleY(-1);
}

:host([align="left"]) > .arrow {
  left: 16px;
}

:host([align="right"]) > .arrow {
  right: 16px;
}