:host {
  --padding: var(--bp-size-500) var(--bp-size-600) var(--bp-size-500) var(--bp-size-400);
  --gap: var(--bp-size-400);
  --filter: drop-shadow(var(--bp-object-shadow-200));
  --background: var(--bp-layer-background-200);
  --color: var(--bp-text-color-500);
  --width: max-content;
  --height: max-content;
  --min-width: 250px;
  --min-height: max-content;
  --font-size: var(--bp-text-size-200);
  --border-left: var(--bp-object-border-width-300) solid var(--status-color);
  --border-radius: var(--bp-object-border-radius-100);
  --status-color: var(--bp-status-neutral-background-300);
  --position-offset: var(--bp-size-600);
  --translate-offset: var(--position-offset);
  overflow: visible;
  margin: auto;
  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(:popover-open) {
  opacity: 1;
  transform: translateY(0);
}

:host {
  opacity: 0;
  transform: translateY(var(--translate-offset));
}

@starting-style {
  :host(:popover-open) {
    opacity: 0;
    transform: translateY(var(--translate-offset));
  }
}

:host([closable]) {
  --padding: var(--bp-size-600) var(--bp-size-900) var(--bp-size-600) var(--bp-size-400);
}

[part='internal'] {
  color: var(--color);
  background: var(--background);
  filter: var(--filter);
  padding: var(--padding);
  border: 0;
  border-left: var(--border-left);
  border-radius: var(--border-radius);
  width: var(--width);
  height: var(--height);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: var(--font-size);
  gap: var(--gap);
  display: flex;
  align-items: center;
  overflow: visible;
  z-index: 9999;
}

bp-button-icon {
  position: absolute;
  top: calc(var(--bp-size-600) + var(--bp-size-200));
  right: var(--bp-size-600);
  z-index: 1;
}

bp-icon {
  --color: var(--status-color);
}

:host([status='accent']) {
  --status-color: var(--bp-status-accent-background-200);
}

:host([status='success']) {
  --status-color: var(--bp-status-success-background-200);
}

:host([status='warning']) {
  --status-color: var(--bp-status-warning-background-200);
}

:host([status='danger']) {
  --status-color: var(--bp-status-danger-background-200);
}

:host([position~='top']) {
  top: var(--position-offset);
  margin: 0 auto;
}

:host([position~='top-start']) {
  top: var(--position-offset);
  left: var(--position-offset);
  bottom: auto;
  right: auto;
}

:host([position~='top-end']) {
  top: var(--position-offset);
  right: var(--position-offset);
  bottom: auto;
  left: auto;
}

:host([position~='right']) {
  right: var(--position-offset);
  left: auto;
}

:host([position~='right-start']) {
  top: var(--position-offset);
  right: var(--position-offset);
  bottom: auto;
  left: auto;
}

:host([position~='right-end']) {
  bottom: var(--position-offset);
  right: var(--position-offset);
  top: auto;
  left: auto;
}

:host([position~='bottom']) {
  bottom: var(--position-offset);
  top: auto;
  margin: 0 auto;
}

:host([position~='bottom-start']) {
  bottom: var(--position-offset);
  left: var(--position-offset);
  top: auto;
  right: auto;
}

:host([position~='bottom-end']) {
  bottom: var(--position-offset);
  right: var(--position-offset);
  top: auto;
  left: auto;
}

:host([position~='left']) {
  left: var(--position-offset);
  right: auto;
}

:host([position~='left-start']) {
  top: var(--position-offset);
  left: var(--position-offset);
  right: auto;
  bottom: auto;
}

:host([position~='left-end']) {
  bottom: var(--position-offset);
  left: var(--position-offset);
  right: auto;
  top: auto;
}

:host([static]) {
  opacity: 1;
  margin: 0;
  width: fit-content;
  transform: none;
}

:host([static][open]) {
  display: block;
}
