.dynamic-popover {
  --popover-grey-border: #e2e2e2;
  --popover-dark-background-color: #0a2443;
  --popover-dark-border-color: #212121;

  background-color: var(--white);
  min-width: 300px;
  min-height: 50px;
  // border: 1px solid var(--popover-grey-border);
  border-radius: 8px;
  top: 0;
  left: 0;
  position: absolute;
  box-shadow: 0px 2px 8px rgba(40, 41, 61, 0.04), 0px 16px 24px rgba(96, 97, 112, 0.16);
  z-index: 3 !important;

  .arrow {
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: -1;

    &::before {
      content: '';
      transform: rotate(45deg);
      background-color: var(--white);
      display: block;
      width: 12px;
      height: 12px;
    }

    &::after {
      content: '';
      display: block;
      width: 18px;
      height: 10px;
      position: absolute;
      background-color: var(--white);
    }
  }

  &[data-popper-placement^='top'] > [data-popper-arrow] {
    bottom: -5px;

    &::after {
      top: -3px;
      left: -3px;
    }
  }

  &[data-popper-placement^='right'] > [data-popper-arrow] {
    left: -5px;

    &::after {
      top: -3px;
      right: -3px;
      width: 10px;
      height: 18px;
    }
  }

  &[data-popper-placement^='bottom'] > [data-popper-arrow] {
    top: -5px;

    &::after {
      top: 5px;
      left: -3px;
    }
  }

  &[data-popper-placement^='left'] > [data-popper-arrow] {
    right: -5px;

    &::after {
      top: -3px;
      left: -3px;
      width: 10px;
      height: 18px;
    }
  }

  &.dark {
    background-color: var(--popover-dark-background-color);
    border-color: var(--popover-dark-border-color);

    .arrow {
      &::before {
        background-color: var(--popover-dark-background-color);
        border-color: var(--popover-dark-border-color);
      }

      &::after {
        background-color: var(--popover-dark-background-color);
      }
    }
  }
}
