:host {
  --bp-popover-offset: 12px;
  --bp-popover-arrow-offset: 2px;
  margin: var(--bp-popover-offset) !important;
}

[part='internal'] {
  anchor-name: --internal;
}

[part='arrow'] {
  position-anchor: --internal;
}

/* https://chrome.dev/anchor-tool/ */
:host([position='center']) {
  position-area: center;
}

:host([position='top']) {
  position-area: top center;
}

:host([position='top-start']) {
  position-area: top span-right;
}

:host([position='top-end']) {
  position-area: top span-left;
}

:host([position='bottom']) {
  position-area: bottom center;
}

:host([position='bottom-start']) {
  position-area: bottom span-right;
}

:host([position='bottom-end']) {
  position-area: bottom span-left;
}

:host([position='right']) {
  position-area: right center;
}

:host([position='right-start']) {
  position-area: right span-bottom;
}

:host([position='right-end']) {
  position-area: right span-top;
}

:host([position='left']) {
  position-area: left center;
}

:host([position='left-start']) {
  position-area: left span-bottom;
}

:host([position='left-end']) {
  position-area: left span-top;
}

:host([popover]) {
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

/* ARROW POSITIONING */
:host([position='bottom']) [part='arrow'] {
  position-area: top;
  translate: 0% 65%;
}

:host([position='top']) [part='arrow'] {
  position-area: bottom;
  translate: 0% -65%;
}

:host([position='top-start']) [part='arrow'] {
  position-area: bottom right;
  translate: -130% -65%;
}

:host([position='top-end']) [part='arrow'] {
  position-area: bottom left;
  translate: 130% -65%;
}

:host([position='bottom']) [part='arrow'] {
  position-area: top;
  translate: 0% 65%;
}

:host([position='bottom-start']) [part='arrow'] {
  position-area: top right;
  translate: -130% 65%;
}

:host([position='bottom-end']) [part='arrow'] {
  position-area: top left;
  translate: 130% 65%;
}

:host([position='left']) [part='arrow'] {
  position-area: right;
  translate: -65% 0%;
}

:host([position='left-start']) [part='arrow'] {
  position-area: bottom right;
  translate: -65% -130%;
}

:host([position='left-end']) [part='arrow'] {
  position-area: top right;
  translate: -65% 130%;
}

:host([position='right']) [part='arrow'] {
  position-area: left;
  translate: 65% 0%;
}

:host([position='right-start']) [part='arrow'] {
  position-area: bottom left;
  translate: 65% -130%;
}

:host([position='right-end']) [part='arrow'] {
  position-area: top left;
  translate: 65% 130%;
}

/* ARROW STYLE */
[part='arrow'] {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--background);
  border-radius: var(--border-radius);
}

:host([position*='top']) [part='arrow'] {
  transform: rotate(-45deg);
}

:host([position*='right']) [part='arrow'] {
  transform: rotate(45deg);
}

:host([position*='bottom']) [part='arrow'] {
  transform: rotate(45deg);
}

:host([position*='left']) [part='arrow'] {
  transform: rotate(45deg);
}
