:host {
  --background: var(--bp-layer-background-200);
  --padding: var(--bp-size-900) var(--bp-size-500) var(--bp-size-500) var(--bp-size-500);
  --width: min(260px, 90vw);
  --height: 100vh;
  --inset-block: 0 0;
  --inset-inline: 0 auto;
  overflow: visible;
  margin: 0;
  z-index: 99;
  padding: 0;
  opacity: 0;
  border: 0;
}

:host(:state(popover-ready)) {
  transition:
    transform var(--bp-animation-duration-300),
    opacity var(--bp-animation-duration-300),
    display var(--bp-animation-duration-300) allow-discrete;
}

:host([position]:popover-open) {
  opacity: 1;
  transform: translateX(0);
}

:host([position='left']) {
  transform: translateX(calc(-1 * var(--width)));
  left: 0;
}

:host([position='right']) {
  transform: translateX(var(--width));
  right: 0;
  left: auto;
}

@starting-style {
  :host([position='left']:popover-open) {
    transform: translateX(calc(-1 * var(--width)));
    opacity: 0;
  }

  :host([position='right']:popover-open) {
    transform: translateX(var(--width));
  }
}

[part='internal'] {
  inset-block: var(--inset-block);
  inset-inline: var(--inset-inline);
  background: var(--background);
  padding: var(--padding);
  width: var(--width);
  max-width: var(--width);
  height: var(--height);
  max-height: var(--height);
  display: flex;
  overflow: visible;
  z-index: 9999;
}

:host::backdrop {
  background: hsl(0deg 0% 0% / 50%);
}

bp-button-icon {
  position: absolute;
  top: var(--bp-size-500);
  right: var(--bp-size-500);
}

:host([position='top']),
:host([position='bottom']) {
  --width: 100vw;
  --height: 240px;
}
