<template>
  <div class="w-100 h-100 bo-1px b-we bo-1px bo-EDEDED bor-6px">
    <div class="w-100 h-35px bo_b-1px bo-EDEDED d-fx jc-sb ai-c">
      <div class="d-fx ml-15px">
        <span class="f-13px fw-500 lh-14px c-767676 mr-3px">Notifications</span>
        <span class="f-13px fw-500 lh-14px cursor-pointer" :class="'c-'+ this.colors.first">3</span>
      </div>
      <!-- {{colors.first}} -->
      <div><span class="f-13px lh-16px mr-15px cursor-pointer text_decoration-underline-h" :class="'c-'+ this.colors.first">Mark All as Read</span></div>
    </div>
    <div>
      <notification-c></notification-c>
      <div class="w-100 h-39px bo_t-1px bo-EDEDED_50 d-fx ai-c jc-c">
        <span class="f-15px lh-18px cursor-pointer text_decoration-underline-h" :class="'c-'+this.colors.first">SEE ALL</span>
      </div>
    </div>
  </div>
</template>

<script>
// mixins
import colors from '@/mixins/site_dependent/colors'
// components
import NotificationC from './components/notificationC.vue'

export default {
  name: 'HeaderNotificationC',
  extends: {},
  props: {},
  data(){
    return{};
  },
  components: {
    'notification-c': NotificationC
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate(){},
  mounted(){},
  mixins: [colors]
}
</script>
