/* SPDX-License-Identifier: Apache-2.0 */
.map-info-contextmenu {
  --contextmenu-border-width: 1px;
  --contextmenu-triangle-width: 20px;
  --contextmenu-triangle-height: 10px;
  --popup-min: 300px;
  --popup-max: 400px;

  min-width: var(--popup-min);
  max-width: var(--popup-max);
  width: max-content;
  box-sizing: content-box;
  background-color: var(--bkg-color) !important;
  color: var(--text-color);
  padding: 15px;
  border-radius: 0;
}

.map-info-contextmenu .tooltip-triangle {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: var(--contextmenu-triangle-height);
  pointer-events: none;
}

.map-info-contextmenu .tooltip-triangle .triangle-fill {
  fill: var(--bkg-color);
  stroke: none;
}

.map-info-contextmenu .tooltip-triangle .triangle-border {
  fill: none;
  stroke: var(--text-color-grad1);
  stroke-width: var(--contextmenu-border-width);
}

.contextmenu-closer {
  text-decoration: none;
  position: absolute;
  top: 1px;
  right: 1px;
}

.contextmenu-closer:after {
  content: '✖';
}

.justify-right {
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
}

.hidden {
  display: none;
}

/* Override some Defaults from ol-ext Popup Style*/
.ol-popup.default>div {
  background-color: var(--bkg-color) !important;
  color: var(--text-color);
  border: 1px solid var(--text-color-grad1) !important;
  border-radius: 0 !important;
}
.ol-popup.default .anchor {
  color: var(--text-color-grad1) !important;
}
.ol-popup.default .anchor:before {
  margin: 1px -11px !important;
}