@import "../variables";
@import "../colors";
@import "../mixins";

$popup-arrow-size: 10px;
$tooltip-background: $color_panel_invert_background;
$max-width: 300px;

/* stylelint-disable no-descending-specificity, max-nesting-depth, selector-no-type */
.Tooltip {
    opacity: 0;
    padding: 10px;
    position: absolute;
    transition-duration: $artistic_transition_duration;
    transition-property: opacity, visibility;
    transition-timing-function: $artistic_transition_function;
    visibility: hidden;
    z-index: 998;

    &-visible {
        opacity: 1;
        transition-duration: $artistic_transition_duration_off;
        visibility: visible;
    }
}

.Tooltip-text {
    white-space: normal;
    word-wrap: break-word;

    ul {
        list-style-type: disc;
        padding-left: $offset_main * 1.5;
    }

    li + li {
        margin-top: 3px;
    }
}

.Tooltip-wrapper {
    background: $tooltip-background;
    border-radius: $border_radius_secondary;
    box-shadow: 0 0 0 1px rgba($color_text_invert, .1);
    color: $color_text_invert;
    font-size: $font_size_small;
    max-width: $max-width;
    padding: $offset_main $offset_main * 1.5;
    position: relative;
    transition: $toggle_transition;

    &::after {
        background: $tooltip-background;
        content: "";
        height: $popup-arrow-size;
        position: absolute;
        transform: rotate(45deg);
        width: $popup-arrow-size;
    }

    .Tooltip-top &::after,
    .Tooltip-bottom &::after {
        left: 50%;
        margin-left: - $popup-arrow-size / 2;
    }

    .Tooltip-left &::after,
    .Tooltip-right &::after {
        margin-top: - $popup-arrow-size / 2;
        top: 50%;
    }

    .Tooltip-top & {
        margin-top: 5px;

        &::after {
            margin-top: - $popup-arrow-size / 2;
            top: 100%;
        }
    }

    .Tooltip-bottom & {
        margin-top: -5px;

        &::after {
            margin-top: - $popup-arrow-size / 2;
            top: 0;
        }
    }

    .Tooltip-left & {
        margin-left: 5px;

        &::after {
            left: 100%;
            margin-left: - $popup-arrow-size / 2;
        }
    }

    .Tooltip-right & {
        margin-left: -5px;

        &::after {
            left: 0;
            margin-left: - $popup-arrow-size / 2;
        }
    }

    .Tooltip-visible & {
        margin: 0;
        transition: $toggle_transition_off;
    }
}

/* stylelint-enable no-descending-specificity, max-nesting-depth, selector-no-type */