@use "../../core/jkl/index" as jkl;

@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;

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

        &[data-position="top"] {
            position-area: top center;
            position-try: top, bottom, right, left;
        }

        &[data-position="bottom"] {
            position-area: bottom center;
            position-try: bottom, top, right, left;
        }

        &[data-position="left"] {
            position-area: left center;
            position-try: left, right, top, bottom;
        }

        &[data-position="right"] {
            position-area: right center;
            position-try: right, left, top, bottom;
        }
    }
}