esl-popup:not(.esl-popup) {
  display: none;
}
.esl-popup {
  --_border-width: var(--esl-popup-border-width, 1px);
  --_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s 0.2s;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border: var(--_border);
  background: var(--esl-popup-background-color, #fff);
  cursor: default;
  will-change: auto;
}
.esl-popup[open] {
  z-index: var(--esl-popup-z-index, 999);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s, transform 0.2s;
}
.esl-popup:not([open]) {
  display: none;
}
.esl-popup .esl-popup-arrow {
  --_size: var(--esl-popup-arrow-size, 20px);
  --_half: calc(var(--_size) / 2);
  --_shift: calc(0.2071 * var(--_size) - var(--_border-width));
  position: absolute;
  top: calc(-1 * var(--_half) - var(--_border-width));
  bottom: 100%;
  z-index: -1;
  transform: rotate(45deg);
  width: var(--_size);
  height: var(--_size);
  margin-left: var(--_shift);
  border-left: var(--_border);
  border-top: var(--_border);
  background: inherit;
}
.esl-popup:is([placed-at='top'], [placed-at='bottom-inner']) .esl-popup-arrow {
  top: auto;
  bottom: calc(-1 * var(--_half) - var(--_border-width));
  transform: rotate(225deg);
}
.esl-popup:is([placed-at='left'], [placed-at='right-inner']) .esl-popup-arrow {
  right: calc(-1 * var(--_half) - var(--_border-width));
  left: auto;
  transform: rotate(135deg);
  margin-top: var(--_shift);
}
.esl-popup:is([placed-at='right'], [placed-at='left-inner']) .esl-popup-arrow {
  left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift));
  right: auto;
  transform: rotate(315deg);
  margin-top: var(--_shift);
}
.esl-popup.disable-arrow .esl-popup-arrow {
  display: none;
}