.hkplayer-textTrack {
    order: 7;
    width: 60px;
    height: 150px;
    z-index: 18;
    position: relative;
    outline: none;
    display: none;
    cursor: default;
    margin-left: 10px;
    margin-top: -119px;
    margin-bottom: 11px;

    ul {
        display: none;
        list-style: none;
        width: 78px;
        background: $definitionUlBgColor;
        border-radius: 1px;
        position: absolute;
        bottom: 30px;
        left: 0;
        text-align: center;
        white-space: nowrap;
        margin-left: -10px;
        z-index: 26;
        cursor: pointer;

        @at-root .hkplayer.hkplayer-textTrack-active & {
            display: block;
        }

        li {
            opacity: 0.7;
            font-family: PingFangSC-Regular;
            font-size: 11px;
            color: $definitionLiColor;
            padding: 6px 13px;

            &.textTrack {
                color: $definitionLiActiveColor;
                opacity: 1;
            }

            &:hover {
                color: $definitionLiActiveColor;
                opacity: 1;
            }
        }
    }

    .name {
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        line-height: 20px;
        height: 20px;
        cursor: pointer;
        color: $definitionNameColor;
        position: absolute;
        bottom: 0;
        width: 60px;
        height: 20px;
        line-height: 20px;
        background: $definitionNameBgColor;
        border-radius: 10px;
        display: inline-block;
        vertical-align: middle;
    }

    @at-root .hkplayer-is-textTrack & {
        display: block;
    }
}