.o_tooltip_parent {
    position: relative!important;

    // Tooltips are placed in the <body/> element when opened because this is
    // the only way to position them above everything else thanks to a 1051
    // z-index. 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).
    //
    // The z-index of the ideal locations cannot be determined safely as they
    // are different from one tip to another. So, in the appswitcher for
    // example, the tooltips will act as root-level z-index 1051. As the chat
    // windows are root-level z-index 3, the tooltips will overlap in that case.
    //
    // Changing the opacity of the tooltip parents forces the creation of a
    // stacking context; the appswitcher tooltips are thus now considered to be
    // root-level z-index auto (or the default appswitcher one) and should so
    // act like their parent (e.g. the appswitcher is below the chat windows so
    // the inner tooltips will be too). The tips will be above all elements of
    // the appswitcher as they still have a high z-index, but relative to the
    // appswitcher (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: @odoo-brand-primary;
    @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;
    .o-position-absolute(@top: 50%, @left: 50%);
    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-modal + 1; // 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 {
        .o-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 {
        .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 {
        .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
        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 {
        .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 {
        .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
        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: "";
        .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;
        .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 {
            visibility: visible;
            transition: visibility 0s ease @o-tip-duration-in;
        }

        &.right {
            &::before {
                left: -@o-tip-arrow-length;
                border-right-color: @o-tip-color;
            }
            &::after {
                .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 {
                .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
                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 {
                .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 {
                .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
                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;
                right: (@o-tip-size - @o-tip-arrow-width) / 2;
            }
        }
    }
}

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