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;

  &[open] {
    z-index: var(--esl-popup-z-index, 999);
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.15s,
      transform 0.2s;
  }

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

  .esl-popup-arrow {
    --_size: var(--esl-popup-arrow-size, 20px);
    --_half: calc(var(--_size) / 2);
    --_shift: calc(0.2071 * var(--_size) - var(--_border-width));
    // 0.2071 = (sqrt(2) - 1) / 2
    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;
  }

  &:is([placed-at='top'], [placed-at='bottom-inner']) {
    .esl-popup-arrow {
      top: auto;
      bottom: calc(-1 * var(--_half) - var(--_border-width));
      transform: rotate(225deg);
    }
  }

  &: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);
    }
  }

  &: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);
    }
  }

  &.disable-arrow {
    .esl-popup-arrow {
      display: none;
    }
  }
}