<template>
    <div class="nus_playbtn" @click="click">
        <div class='nu_playicon'></div>
    </div>
</template>
<script>
export default {
    name: 'play-btn',
    methods: {
        click(evt) {
            evt._contentType = 'playBtn';
            this.$emit('click', evt);
        }
    }
};
</script>
<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';

.nus_playbtn {
    position: absolute;
    width: $nuvideo-playbtn-size;
    height: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    border-color:  $nuvideo-playbtn-color;
    .nu_playicon{
        box-sizing: content-box;
        border: 4px solid;
        border-color: inherit;
        border-radius: 50%;
        padding-top: 100%;
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        &:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-33%,-50%);
            width: 0;
            height: 0;
            border: 15 * ($nuvideo-playbtn-size / 50)  solid transparent;
            border: {
                left-color: inherit;
                left-width: 20 * ($nuvideo-playbtn-size / 50);
                right: none;
            };
        }
    }
}

</style>
