// Tooltips
// --------------------------------------------------------------

.plyr__tooltip {
    position: absolute;
    z-index: 2;
    bottom: 100%;
    margin-bottom: (@plyr-tooltip-padding * 2);
    padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
    pointer-events: none;

    opacity: 0;
    background: @plyr-tooltip-bg;
    box-shadow: @plyr-tooltip-shadow;
    border-radius: @plyr-tooltip-radius;

    color: @plyr-tooltip-color;
    font-size: @plyr-font-size-small;
    line-height: 1.3;

    transform: translate(-50%, 10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s .1s ease, opacity .2s .1s ease;

    // Arrows
    &::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    // The background triangle
    &::before {
        bottom: -@plyr-tooltip-arrow-size;
        border-right: @plyr-tooltip-arrow-size solid transparent;
        border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
        border-left: @plyr-tooltip-arrow-size solid transparent;
        z-index: 2;
    }
}
.plyr button:hover .plyr__tooltip,
.plyr button.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
.plyr button:hover .plyr__tooltip {
    z-index: 3;
}