.o_tooltip_parent {
    position: relative!important;

    // Tooltips are placed in the <body/> element with z-index 1070 because this
    // is the only way to position them above everything else. However, for
    // scrolling performance, the tooltip is placed in its ideal location (see
    // Tip._get_ideal_location). When in this location, the tooltip were
    // sometimes overlapping unwanted elements (e.g. chat windows).
    //
    // Changing the opacity of the tooltip parents forces the creation of a
    // stacking context; the home menu tooltips are thus now considered to be
    // root-level z-index auto (or the default home menu one) and should so
    // act like their parent (e.g. the home menu is below the chat windows so
    // the inner tooltips will be too). The tips will be above all elements of
    // the home menu as they still have a high z-index, but relative to the
    // home menu (this is especially useful in the website where most tooltips
    // are placed in the body and need to be placed above elements with z-index
    // like the navbar).
    opacity: 0.999;
}

.o_tooltip {
    $o-tip-color: $o-brand-odoo;
    $o-tip-size: 24px;
    $o-tip-border-width: 2px;
    $o-tip-arrow-length: 10px;
    $o-tip-arrow-width: 20px;
    $o-tip-arrow-integration: 2px;

    $o-tip-duration-in: 300ms;
    $o-tip-size-duration-in: floor($o-tip-duration-in * 3 / 4);
    $o-tip-size-delay-in: floor($o-tip-duration-in / 4);
    $o-tip-border-radius-duration-in: floor($o-tip-duration-in / 2);
    $o-tip-border-radius-delay-in: floor($o-tip-duration-in * 0);
    $o-tip-bg-color-duration-in: floor($o-tip-duration-in * 1);
    $o-tip-bg-color-delay-in: floor($o-tip-duration-in * 0);
    $o-tip-arrow-duration-in: floor($o-tip-duration-in / 2);
    $o-tip-arrow-delay-in: floor($o-tip-duration-in * 0);
    $o-tip-white-arrow-duration-in: floor($o-tip-duration-in * 1);
    $o-tip-white-arrow-delay-in: floor($o-tip-duration-in * 0);

    $o-tip-duration-out: 200ms;
    $o-tip-size-duration-out: floor($o-tip-duration-out * 2 / 3);
    $o-tip-size-delay-out: floor($o-tip-duration-out * 0);
    $o-tip-border-radius-duration-out: floor($o-tip-duration-out * 2 / 3);
    $o-tip-border-radius-delay-out: floor($o-tip-duration-out / 3);
    $o-tip-arrow-duration-out: floor($o-tip-duration-out / 2);
    $o-tip-arrow-delay-out: floor($o-tip-duration-out / 2);

    box-sizing: content-box;
    /*rtl:begin:ignore*/
    @include o-position-absolute($top: 50%, $left: 50%);
    /*rtl:end:ignore*/
    opacity: 0;
    width: $o-tip-size;
    height: $o-tip-size;
    border: $o-tip-border-width solid $o-tip-color;
    border-radius: 50%;
    padding: 0; // ! Cannot be changed ! Javascript rely on this.
    z-index: $zindex-tooltip; // See comment on 'o_tooltip_parent' class
    background-color: $o-tip-color;
    box-shadow: 0 2px 2px 1px rgba(150, 150, 150, 0.3);

    transition:
        width $o-tip-size-duration-out ease $o-tip-size-delay-out,
        height $o-tip-size-duration-out ease $o-tip-size-delay-out,
        margin $o-tip-size-duration-out ease $o-tip-size-delay-out,
        border-radius $o-tip-border-radius-duration-out ease $o-tip-border-radius-delay-out;

    &.o_animated {
        animation: move-bottom-top 500ms ease-in 0ms infinite alternate;
        &.right, &.left {
            animation-name: move-left-right;
        }
    }

    &::before {
        content: "";
        border: 0 solid rgba(0, 0, 0, 0);
        transition: all $o-tip-arrow-duration-out ease $o-tip-arrow-delay-out;
    }
    &.right::before {
        @include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
        border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0;
        border-right-color: $o-tip-color;
    }
    &.top::before {
        /*rtl:begin:ignore*/
        @include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
        /*rtl:end:ignore*/
        border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2;
        border-top-color: $o-tip-color;
    }
    &.left::before {
        @include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
        border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length;
        border-left-color: $o-tip-color;
    }
    &.bottom::before {
        /*rtl:begin:ignore*/
        @include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
        /*rtl:end:ignore*/
        border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2;
        border-bottom-color: $o-tip-color;
    }

    &::after {
        content: "";
        @include o-position-absolute(-$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width);
        border-color: $o-tip-color;
        border-radius: 50%;
        transition: margin $o-tip-size-duration-out ease $o-tip-size-delay-out, border-radius $o-tip-duration-out linear 0s;
        background: radial-gradient(lighten($o-tip-color, 7%), $o-tip-color);
    }

    > .o_tooltip_overlay {
        display: none;
        @include o-position-absolute(0, 0, 0, 0);
        margin: -$o-tip-border-width;
        z-index: -1;
    }
    > .o_tooltip_content {
        overflow: hidden;
        padding: floor($o-tip-size/4) floor($o-tip-size/2);
        visibility: hidden;
        transition: visibility 0s ease 0s;
        color: black;

        // Force style so that it does not depend on where the tooltip is attached
        line-height: $line-height-base;
        font-size: $font-size-base;
        font-family: $font-family-sans-serif;
        font-weight: normal;

        .o_skip_tour {
            display: inline-block;
            margin-top: 4px;
            cursor: pointer;
            color: gray;
            &:hover {
                color: darken(gray, 20%);
            }
        }
        > p:last-child {
            margin-bottom: 0;
        }
    }

    &.active {
        border-radius: 0;
        background-color: white;

        transition:
            width $o-tip-size-duration-in ease $o-tip-size-delay-in,
            height $o-tip-size-duration-in ease $o-tip-size-delay-in,
            margin $o-tip-size-duration-in ease $o-tip-size-delay-in,
            border-radius $o-tip-border-radius-duration-in ease $o-tip-border-radius-delay-in,
            background-color $o-tip-bg-color-duration-in ease $o-tip-bg-color-delay-in;

        &::before {
            transition: all $o-tip-arrow-duration-in ease $o-tip-arrow-delay-in;
        }
        &::after {
            border: 0 solid rgba(0, 0, 0, 0);
            border-radius: 0;
        }

        > .o_tooltip_overlay {
            display: block;
        }
        > .o_tooltip_content {
            direction: ltr;
            visibility: visible;
            transition: visibility 0s ease $o-tip-duration-in;
        }

        &.right {
            &::before {
                left: -$o-tip-arrow-length;
                border-right-color: $o-tip-color;
            }
            &::after {
                @include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
                border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0;
                border-right-color: white;
                transition: border-right-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
            }
        }
        &.top {
            &::before {
                bottom: -$o-tip-arrow-length;
                border-top-color: $o-tip-color;
            }
            &::after {
                /*rtl:begin:ignore*/
                @include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
                /*rtl:end:ignore*/
                border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2;
                border-top-color: white;
                transition: border-top-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
            }
        }
        &.left {
            &::before {
                right: -$o-tip-arrow-length;
                border-left-color: $o-tip-color;
            }
            &::after {
                @include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
                border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length;
                border-left-color: white;
                transition: border-left-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
            }
        }
        &.bottom {
            &::before {
                top: -$o-tip-arrow-length;
                border-bottom-color: $o-tip-color;
            }
            &::after {
                /*rtl:begin:ignore*/
                @include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
                /*rtl:end:ignore*/
                border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2;
                border-bottom-color: white;
                transition: border-bottom-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
            }
        }
    }

    &.inverse {
        &.left, &.right {
            &::before, &.active::after {
                top: auto;
                bottom: ($o-tip-size - $o-tip-arrow-width) / 2;
            }
        }
        &.top, &.bottom {
            &::before, &.active::after {
                left: auto#{"/*rtl:ignore*/"};
                right: ($o-tip-size - $o-tip-arrow-width) / 2#{"/*rtl:ignore*/"};
            }
        }
    }
}

@media print {
    .o_tooltip {
        display: none;
    }
}