@use '../core/pop-up/pop-up';

@use '../core/styles/common/tokens' as *;

@use './tooltip-theme' as *;

$trigger-margin: 8px;
$trigger-margin_without-arrow: 4px;

.kbq-tooltip-panel_horizontal-navbar {
    &:has(.kbq-tooltip_placement-top),
    &:has(.kbq-tooltip_placement-top-left),
    &:has(.kbq-tooltip_placement-top-right) {
        margin-bottom: 9px;
    }

    &:has(.kbq-tooltip_placement-right),
    &:has(.kbq-tooltip_placement-right-top),
    &:has(.kbq-tooltip_placement-right-bottom) {
        margin-left: 9px;
    }

    &:has(.kbq-tooltip_placement-bottom),
    &:has(.kbq-tooltip_placement-bottom-left),
    &:has(.kbq-tooltip_placement-bottom-right) {
        margin-top: 9px;
    }

    &:has(.kbq-tooltip_placement-left),
    &:has(.kbq-tooltip_placement-left-top),
    &:has(.kbq-tooltip_placement-left-bottom) {
        margin-right: 9px;
    }
}

.kbq-tooltip__inner {
    border-radius: var(--kbq-tooltip-size-border-radius);
    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
    word-break: break-word;
}

.kbq-tooltip {
    box-sizing: border-box;

    border-radius: var(--kbq-tooltip-size-border-radius);

    white-space: pre-line;

    @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);

    max-width: var(--kbq-tooltip-size-max-width);

    .kbq-tooltip__inner {
        padding: var(--kbq-tooltip-size-padding-vertical) var(--kbq-tooltip-size-padding-horizontal);
    }

    &.kbq-tooltip_arrowless {
        @include pop-up.popup-margins(kbq-tooltip, $trigger-margin_without-arrow);
    }
}

@include kbq-tooltip-theme();
@include kbq-tooltip-typography();

.kbq-tooltip__arrow {
    position: absolute;

    width: var(--kbq-tooltip-size-arrow-size);
    height: var(--kbq-tooltip-size-arrow-size);

    transform: rotate(45deg);

    z-index: -1;
}

$arrow-offset: calc((#{var(--kbq-tooltip-size-arrow-size)} - 1px) / -2);
$arrow-padding: calc((18px + $trigger-margin) / 2);

@include pop-up.popup-arrow-positions(kbq-tooltip, $arrow-offset, $arrow-padding);