/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-help {
    anchor-scope: all;
    display: inline;
  }
  .jkl-help-trigger {
    vertical-align: middle;
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
    overflow: visible !important;
    anchor-name: --trigger;
  }
  .jkl-help-trigger::after {
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    inset-inline: -50%;
    inset-block: -20%;
  }
  .jkl-help-popover {
    width: max-content;
    max-width: min(40ch, 80vw);
    padding: var(--jkl-unit-30);
    margin: var(--jkl-unit-05);
    position-anchor: --trigger;
    background-color: var(--jkl-color-background-container-inverted);
    color: var(--jkl-color-text-inverted);
    anchor-name: --help-box;
  }
  .jkl-help-popover[data-position=top] {
    position-area: top center;
    position-try: top, bottom, right, left;
  }
  .jkl-help-popover[data-position=bottom] {
    position-area: bottom center;
    position-try: bottom, top, right, left;
  }
  .jkl-help-popover[data-position=left] {
    position-area: left center;
    position-try: left, right, top, bottom;
  }
  .jkl-help-popover[data-position=right] {
    position-area: right center;
    position-try: right, left, top, bottom;
  }
}