@tiplayer-zindex: 1000;
@tiplayer-box-zindex: 1001;
@tiplayer-embedded-box-margin: 10px 0 0;
@tiplayer-box-max-width: 276px;
@tiplayer-content-padding: 10px;
@tiplayer-arrow-size: 4px;
@tiplayer-arrow-horizontal-offset: 1.285714em;
@tiplayer-arrow-vertical-offset: 0.7em;
@tiplayer-arrow-white-theme-border: rgba(0, 0, 0, 0.1);
@tiplayer-bgcolor-default: rgba(red(@nb-gray-1), green(@nb-gray-1), blue(@nb-gray-1), 0.8);
@tiplayer-box-shadow: 0 0 4px 0 rgba(red(@nb-black), green(@nb-black), blue(@nb-black), 0.2);

.@{prefix}-tiplayer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    line-height: 1.4286;

    &.@{prefix}-tiplayer-embedded {
        position: static;

        .@{prefix}-tiplayer-box {
            margin: @tiplayer-embedded-box-margin;
        }
    }
}

.@{prefix}-tiplayer-box {
    max-width: @tiplayer-box-max-width;
    background: @tiplayer-bgcolor-default;
    box-shadow: @tiplayer-box-shadow;
    border-radius: @border-radius-small;
    z-index: @tiplayer-box-zindex;
    color: @nb-white;

    .@{prefix}-tiplayer-content {
        padding: @tiplayer-content-padding;
    }
}

.@{prefix}-tiplayer-arrow {
    .arrow(@tiplayer-arrow-size, @tiplayer-bgcolor-default, bottom);
}

.@{prefix}-tiplayer-theme-white {
    background: @nb-white;
    color: @text-color-normal;

    .@{prefix}-tiplayer-arrow {
        .arrow(@tiplayer-arrow-size, @nb-white, bottom, 1px, @tiplayer-arrow-white-theme-border);
    }
}

// --- tiplayer theme, can be use 'pink' | 'yellow' | 'white' ---
.@{prefix}-tiplayer-theme-pink {
    background: @nb-red-10;
    color: @text-color-normal;
}

.@{prefix}-tiplayer-theme-yellow {
    background: @nb-yellow-10;
    color: @text-color-normal;
}