.xh-popover {
  &__content-wrapper {
    position: fixed;
    z-index: 21;
    background-color: var(--xh-bg);
    box-shadow: var(--xh-popover-box-shadow);
  }

  &__content-overlay {
    position: fixed;
    top: var(--xh-pad-safe-top);
    bottom: var(--xh-pad-safe-bottom);
    left: var(--xh-pad-safe-left);
    right: var(--xh-pad-safe-right);
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: transparent;

    &--backdrop {
      background-color: var(--xh-popover-backdrop-bg);
    }
  }
}