:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  --background: var(--sl-panel-background-color);
  --border-color: var(--sl-panel-border-color);
  display: inline-block;
}

.popover {
  position: relative;
}

.popover__positioner {
  position: absolute;
  z-index: var(--sl-z-index-popover);
}

.popover__panel {
  max-height: 70vh;
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-medium);
  font-weight: var(--sl-font-weight-normal);
  color: var(--color);
  background-color: var(--background);
  border: solid 1px var(--border-color);
  border-radius: var(--sl-border-radius-medium);
  box-shadow: var(--sl-shadow-large);
  opacity: 0;
  overflow: auto;
  overscroll-behavior: none;
  pointer-events: none;
  transform: scale(0.9);
  transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;
}

.popover__arrow,
.popover__arrow::before {
  opacity: 0;
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--background);
}

.popover__arrow {
  visibility: hidden;
}

.popover__arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

.popover__positioner.popover-visible .popover__panel, .popover__positioner.popover-visible .popover__arrow {
  opacity: 1;
}
.popover__positioner.popover-visible .popover__panel {
  transform: scale(1);
}
.popover__positioner[data-popper-placement^=top] .popover__panel {
  transform-origin: bottom;
}
.popover__positioner[data-popper-placement^=top] .popover__arrow {
  bottom: -6px;
}
.popover__positioner[data-popper-placement^=top] .popover__arrow::before {
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
.popover__positioner[data-popper-placement^=bottom] .popover__panel {
  transform-origin: top;
}
.popover__positioner[data-popper-placement^=bottom] .popover__arrow {
  top: -6px;
}
.popover__positioner[data-popper-placement^=bottom] .popover__arrow::before {
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}
.popover__positioner[data-popper-placement^=left] .popover__panel {
  transform-origin: right;
}
.popover__positioner[data-popper-placement^=left] .popover__arrow {
  right: -6px;
}
.popover__positioner[data-popper-placement^=left] .popover__arrow::before {
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
.popover__positioner[data-popper-placement^=right] .popover__panel {
  transform-origin: left;
}
.popover__positioner[data-popper-placement^=right] .popover__arrow {
  left: -6px;
}
.popover__positioner[data-popper-placement^=right] .popover__arrow::before {
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}
.popover__positioner.popover-visible .popover__panel {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.popover__positioner.popover-visible .popover__arrow::before {
  opacity: 1;
}