:host {
  --padding: var(--bp-size-600);
  --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: 620px;
  --min-height: 360px;
  --font-size: var(--bp-text-size-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(:popover-open)::backdrop {
  opacity: 1;
}

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

:host::backdrop {
  opacity: 0;
}

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

  :host(:popover-open)::backdrop {
    opacity: 0;
  }
}

[part='internal'] {
  color: var(--color);
  background: var(--background);
  filter: var(--filter);
  width: var(--width);
  height: var(--height);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: var(--font-size);
  z-index: 9999;
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0;
}

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

slot:not([name]) {
  display: block;
  padding: var(--padding);
  min-height: var(--content-min-height);
  flex-grow: 1;
}

[name='header'] {
  display: flex;
  border-bottom: var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);
  padding: var(--padding);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  align-items: center;
  min-height: var(--bp-size-900);
  overflow: hidden;
}

[name='footer'] {
  display: var(--internal-footer-display, contents);
  border-top: var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);
  align-items: center;
  padding: var(--padding);
  min-height: var(--bp-size-900);
}

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

:host([size='sm']) {
  --min-width: 460px;
  --min-height: 320px;
}

:host([size='lg']) {
  --min-width: 980px;
  --min-height: 540px;
}

: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;
}
