@charset "UTF-8";
@use "../../core/jkl";

$_tooltip-border-width: jkl.rem(1px);
$_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
$_focus-ring-width: jkl.rem(2px);

@layer jokul.components {
    .jkl-tooltip-trigger {
        all: unset;

        &:focus {
            @include jkl.keyboard-navigation {
                @include jkl.no-grow-bold;
            }
        }
    }

    .jkl-tooltip-content {
        --content-padding: var(--jkl-unit-15);
        --background-color: var(--jkl-color-background-container-inverted);

        @include jkl.text-style("paragraph-small");
        background-color: var(--background-color);
        color: var(--jkl-color-text-inverted);
        display: inline-block;
        min-width: min-content;
        max-width: min(jkl.rem(310px),
                100%); // 10px mindre enn smaleste støttede skjerm
        padding: var(--content-padding);
        position: absolute;
        z-index: jkl.$z-index--floating;

        @include jkl.forced-colors-mode {
            border: 1px solid CanvasText;
        }
    }

    .jkl-tooltip-question-button {
        @include jkl.motion("exit", "snappy");
        transition-property: color;
        cursor: pointer;
        position: relative;
        background-color: transparent;
        padding: 0;
        display: inline-flex;
        align-items: baseline;
        color: var(--jkl-color-text-interactive);
        transform: translateY(min(0.25em, jkl.rem(6px)));
        border-radius: 9999px;

        @include jkl.reset-outline;

        &:hover {
            --button-color: var(--jkl-color-text-interactive-hover);
        }

        &:focus-visible {
            @include jkl.focus-outline(0);
        }

        &::after {
            content: "";
            position: absolute;

            top: 50%;
            left: 50%;
            translate: -50% -50%;
            min-width: 44px;
            min-height: 44px;
        }
    }
}