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

:host {
  display: inline-block;
}

.dropdown {
  position: relative;
}

.dropdown__trigger {
  display: block;
}

.dropdown__positioner {
  position: absolute;
  z-index: var(--sl-z-index-dropdown);
}

.dropdown__panel {
  max-height: 40vh;
  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(--sl-panel-background-color);
  border: solid 1px var(--sl-panel-border-color);
  border-radius: var(--sl-border-radius-medium);
  box-shadow: var(--sl-shadow-large);
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  pointer-events: none;
  transform: scale(0.9);
  transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;
}

.dropdown__positioner[data-popper-placement^=top] .dropdown__panel {
  transform-origin: bottom;
}
.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel {
  transform-origin: top;
}
.dropdown__positioner[data-popper-placement^=left] .dropdown__panel {
  transform-origin: right;
}
.dropdown__positioner[data-popper-placement^=right] .dropdown__panel {
  transform-origin: left;
}
.dropdown__positioner.popover-visible .dropdown__panel {
  opacity: 1;
  transform: none;
  pointer-events: all;
}