.Popover {
  box-shadow: var(--shadow-l);
  border-radius: var(--border-radius-xs);
  background-color: var(--color-background-surface-highest-default);
  z-index: var(--z-index-popover);
  inline-size: auto;
  box-sizing: border-box;
  outline: none;
}

  .Popover-Arrow {
    display: flex;
    color: var(--popover-arrow-color);
  }

  .Popover-Arrow_color_light {
        --popover-arrow-color: var(--color-background-surface-highest-default);
      }

  .Popover-Arrow_color_dark {
        --popover-arrow-color: var(--color-background-surface-highest-inverse);
      }

  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
        inset-block-end: -9px;
      }

  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
          transform: rotate(270deg);
        }

  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
        inset-block-end: -12px;
      }

  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
          transform: rotate(270deg);
        }

  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
        inset-block-start: -9px;
      }

  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
          transform: rotate(90deg);
        }

  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
        inset-block-start: -12px;
      }

  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
          transform: rotate(90deg);
        }

  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
        inset-inline-end: -6px;
      }

  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
          transform: rotate(180deg);
        }

  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
        inset-inline-end: -8px;
      }

  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
          transform: rotate(180deg);
        }

  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
        inset-inline-start: -6px;
      }

  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
        inset-inline-start: -8px;
      }

  .Popover_disableInteractive {
    pointer-events: none;
  }

.Popover_animation-enter {
    opacity: 0;
  }

.Popover_animation-enter-active {
    opacity: 1;
    transition: opacity var(--transition-default);
  }

.Popover_animation-enter-done {
    opacity: 1;
  }

.Popover_animation-exit {
    opacity: 1;
  }

.Popover_animation-exit-active {
    opacity: 0;
    transition: opacity var(--transition-default);
  }

.Popover_animation-exit-done {
    opacity: 0;
  }