.hkplayer-definition {
    order: 4;
    width: 60px;
    z-index: 18;
    position: relative;
    outline: none;
    display: none;
    cursor: default;
    margin: -119px 8px 14px 8px;

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

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

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

            &.definition {
                color: #ff4141;
                opacity: 1;

                &:hover {
                    color: #ff4141;
                }
            }

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

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

        &:hover {
            background-color: #ff4141;
            color: #fff;
        }
    }

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