:host {
  display: contents;
}

:host([open]:not([open=false])) .r-float {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--r-float--transition-duration, 120ms) ease;
}

:host([open][data-trigger-hidden]) .r-float {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

:host([data-actual-placement-y=top]) .r-float {
  --r-float--transform-origin: bottom center;
}

:host([data-actual-placement-y=bottom]) .r-float {
  --r-float--transform-origin: top center;
}

:host([data-actual-placement-x=left][data-actual-placement-y=center]) .r-float {
  --r-float--transform-origin: right center;
}

:host([data-actual-placement-x=right][data-actual-placement-y=center]) .r-float {
  --r-float--transform-origin: left center;
}

:host([arrow]:not([arrow=false])) .r-float::after {
  content: var(--r-float--after--content, "");
  position: var(--r-float--after--position, absolute);
  top: var(--r-float--after--top, auto);
  right: var(--r-float--after--right, auto);
  bottom: var(--r-float--after--bottom, auto);
  left: var(--r-float--after--left, auto);
  display: var(--r-float--after--display, block);
  width: var(--r-float--after--width, 12px);
  height: var(--r-float--after--height, 6px);
  background-color: var(--r-float--after--background-color, var(--r-background-inverse));
  clip-path: var(--r-float--after--clip-path, polygon(50% 0%, 0% 100%, 100% 100%));
  border-radius: var(--r-float--after--border-radius, 0);
  transform: var(--r-float--after--transform, none);
}

:host([data-actual-placement-x=left][arrow]:not([arrow=false])) {
  --r-float--after--left: calc(100% - 3px);
  --r-float--after--transform: rotate(90deg);
}

:host([data-actual-placement-x=center][arrow]:not([arrow=false])) {
  --r-float--after--left: calc(50% - 6px);
}

:host([data-actual-placement-x=right][arrow]:not([arrow=false])) {
  --r-float--after--right: calc(100% - 3px);
  --r-float--after--transform: rotate(-90deg);
}

:host([data-actual-placement-y=top][arrow]:not([arrow=false])) {
  --r-float--after--top: 100%;
  --r-float--after--transform: rotate(180deg);
}

:host([data-actual-placement-y=bottom][arrow]:not([arrow=false])) {
  --r-float--after--bottom: 100%;
}

:host([data-actual-placement-x=left][data-actual-placement-y=center][arrow]:not([arrow=false])),
:host([data-actual-placement-x=right][data-actual-placement-y=center][arrow]:not([arrow=false])) {
  --r-float--after--top: calc(50% - 3px);
}

.r-float {
  position: var(--r-float--position, fixed);
  left: var(--r-float--left, var(--r-float-x, -9999px));
  top: var(--r-float--top, var(--r-float-y, -9999px));
  box-sizing: var(--r-float--box-sizing, border-box);
  max-width: var(--r-float--max-width, calc(100vw - 16px));
  max-height: var(--r-float--max-height, calc(100vh - 16px));
  z-index: var(--r-float--z-index, 1060);
  visibility: var(--r-float--visibility, hidden);
  pointer-events: var(--r-float--pointer-events, none);
  opacity: var(--r-float--opacity, 0);
  transition: var(--r-float--transition, opacity var(--r-float--transition-duration, 120ms) ease, visibility 0s linear var(--r-float--transition-duration, 120ms));
  color: var(--r-float--color, var(--r-text-regular));
  background-color: var(--r-float--background-color, var(--r-background-interactive-regular));
  border-radius: var(--r-float--border-radius, none);
  padding: var(--r-float--padding, none);
  font-family: var(--r-float--font-family, var(--r-font-family-text));
  font-size: var(--r-float--font-size, var(--r-font-size-200));
  font-weight: var(--r-float--font-weight, var(--r-font-weight-regular));
  font-style: var(--r-float--font-style, normal);
  line-height: var(--r-float--line-height, var(--r-line-height-s));
  max-width: var(--r-float--max-width, 18.75rem);
  width: var(--r-float--width, max-content);
  transform-origin: var(--r-float--transform-origin, center);
}