@layer component  {
    theme-popover  {
        --arrow-gap: 6px;
        position: relative;
        display: inline-flex;
        user-select: none;

  }
  theme-popover[data-clone]  {
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;

  }
  theme-popover-content  {
        position: fixed;
        inset-block-start: var(--fixed-top, 0);
        inset-inline-start: var(--fixed-left, 0);
        z-index: var(--z-index-popover);
        width: max-content;
        max-width: min(90vw, 288px);
        padding: 4px 8px;
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: var(--text-color);
        word-break: break-word;
        white-space: normal;
        visibility: hidden;
        background-color: var(--background-color);
        border-radius: var(--card-border-radius);
        transform: translate(       calc(var(--transform-x, 0px) + var(--offset-x, 0px)),       calc(var(--transform-y, 0px) + var(--offset-y, 0px))     );

  }
  theme-popover-content::before,   theme-popover-content::after  {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        content: "";
        border: calc(var(--arrow-gap) / 2) solid var(--background-color);

  }
  theme-popover-content::before  {
        border-color: var(--border-color);

  }
  theme-popover:not([data-mode]) theme-popover-content,   theme-popover[data-mode="popover"] theme-popover-content  {
        --background-color: rgb(var(--color-background));
        --text-color: rgb(var(--color-text));
        --border-color: rgba(var(--color-text), var(--modal-border-opacity));
        --border-width: var(--modal-border-thickness);
        background-color: var(--background-color);
        border-color: var(--border-color);
        border-style: solid;
        border-width: var(--border-width);
        border-radius: var(--modal-border-radius);
        box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y)       var(--modal-shadow-blur)       rgba(var(--color-shadow), var(--modal-shadow-opacity));

  }
  theme-popover[data-mode="tooltip"] theme-popover-content  {
        --text-color: #fff;
        --background-color: rgb(0 0 0 / 80%);
        --border-color: transparent;
        --border-width: 0px;
        border-width: 0;

  }
  theme-popover:not([open]) theme-popover-content,   theme-popover:not(:hover) theme-popover-content  {
        display: none;
        visibility: hidden;
        opacity: 0;

  }
  theme-popover[open] theme-popover-content  {
        display: block;
        visibility: visible;
        opacity: 1;

  }
  theme-popover:not([data-position]),   theme-popover[data-adaptation-position="top"],   theme-popover:not([data-adaptation-position])[data-position="top"]  {
        --transform-y: calc(-1 * var(--arrow-gap));

  }
  theme-popover:not([data-position]) theme-popover-content::before,   theme-popover:not([data-position]) theme-popover-content::after,   theme-popover[data-adaptation-position="top"] theme-popover-content::before,   theme-popover[data-adaptation-position="top"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="top"]     theme-popover-content::before,   theme-popover:not([data-adaptation-position])[data-position="top"]     theme-popover-content::after  {
        inset-block-start: 100%;
        inset-inline-start: 50%;
        border-block-end: 0;
        border-inline-start-color: transparent;
        border-inline-end-color: transparent;
        transform: translateX(calc(-50% + var(--offset-x) * -1));

  }
  theme-popover:not([data-position]) theme-popover-content::after,   theme-popover[data-adaptation-position="top"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="top"]     theme-popover-content::after  {
        transform: translateX(calc(-50% + var(--offset-x) * -1))       translateY(calc(-1 * var(--border-width)));

  }
  theme-popover[data-adaptation-position="bottom"],   theme-popover:not([data-adaptation-position])[data-position="bottom"]  {
        --transform-y: calc(1 * var(--arrow-gap));

  }
  theme-popover[data-adaptation-position="bottom"]     theme-popover-content::before,   theme-popover[data-adaptation-position="bottom"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="bottom"]     theme-popover-content::before,   theme-popover:not([data-adaptation-position])[data-position="bottom"]     theme-popover-content::after  {
        inset-block-end: 100%;
        inset-inline-start: 50%;
        border-block-start: 0;
        border-inline-start-color: transparent;
        border-inline-end-color: transparent;
        transform: translateX(calc(-50% + var(--offset-x) * -1));

  }
  theme-popover[data-adaptation-position="bottom"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="bottom"]     theme-popover-content::after  {
        transform: translateX(calc(-50% + var(--offset-x) * -1))       translateY(calc(1 * var(--border-width)));

  }
  theme-popover[data-adaptation-position="left"],   theme-popover:not([data-adaptation-position])[data-position="left"]  {
        --transform-x: calc(-1 * var(--arrow-gap));

  }
  theme-popover[data-adaptation-position="left"] theme-popover-content::before,   theme-popover[data-adaptation-position="left"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="left"]     theme-popover-content::before,   theme-popover:not([data-adaptation-position])[data-position="left"]     theme-popover-content::after  {
        inset-block-start: 50%;
        inset-inline-end: 0;
        border-block-start-color: transparent;
        border-block-end-color: transparent;
        border-inline-end: 0;
        transform: translate(100%, calc(-50% + var(--offset-y) * -1));

  }
  theme-popover[data-adaptation-position="left"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="left"]     theme-popover-content::after  {
        transform: translate(       calc(100% - var(--border-width)),       calc(-50% + var(--offset-y) * -1)     );

  }
  theme-popover[data-adaptation-position="right"],   theme-popover:not([data-adaptation-position])[data-position="right"]  {
        --transform-x: calc(1 * var(--arrow-gap));

  }
  theme-popover[data-adaptation-position="right"] theme-popover-content::before,   theme-popover[data-adaptation-position="right"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="right"]     theme-popover-content::before,   theme-popover:not([data-adaptation-position])[data-position="right"]     theme-popover-content::after  {
        inset-block-start: 50%;
        inset-inline-start: 0;
        border-block-start-color: transparent;
        border-block-end-color: transparent;
        border-inline-start: 0;
        transform: translate(-100%, calc(-50% + var(--offset-y) * -1));

  }
  theme-popover[data-adaptation-position="right"] theme-popover-content::after,   theme-popover:not([data-adaptation-position])[data-position="right"]     theme-popover-content::after  {
        transform: translate(       calc(-100% + var(--border-width)),       calc(-50% + var(--offset-y) * -1)     );

  }
}