// --------------------------------------------------------------
// 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;
    border-radius: @plyr-tooltip-radius;
    box-shadow: @plyr-tooltip-shadow;
    color: @plyr-tooltip-color;
    font-size: @plyr-font-size-small;
    font-weight: @plyr-font-weight-normal;
    line-height: 1.3;
    transform: translate(-50%, 10px) scale(0.8);
    transform-origin: 50% 100%;
    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;

    &::before {
        // Arrows
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 50%;
        transform: translateX(-50%);

        // The background triangle
        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;
    }
}

// Displaying
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.plyr .plyr__control:hover .plyr__tooltip {
    z-index: 3;
}

// First tooltip
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
    left: 0;
    transform: translate(0, 10px) scale(0.8);
    transform-origin: 0 100%;

    &::before {
        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
    }
}

// Last tooltip
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
    right: 0;
    transform: translate(0, 10px) scale(0.8);
    transform-origin: 100% 100%;

    &::before {
        left: auto;
        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
        transform: translateX(50%);
    }
}

.plyr__controls > .plyr__control:first-child,
.plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child {
    &:hover .plyr__tooltip,
    &.tab-focus .plyr__tooltip,
    .plyr__tooltip--visible {
        transform: translate(0, 0) scale(1);
    }
}