<template>
  <div class="sort-btn">
    <i class="el-icon-caret-top" :class="{ active: sortType === 'asc' }"></i>
    <i class="el-icon-caret-bottom" :class="{ active: sortType === 'desc' }"></i>
  </div>
</template>

<script>
export default {
  name: 'SortBtn',
  props: {
    sortType: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.sort-btn {
  width: 14px;
  .el-icon-caret-top {
    top: 4px;
  }
  .el-icon-caret-bottom {
    top: -4px;
  }
  i {
    transform: scale(0.8);
    font-size: 12px;
    position: relative;
    color: #4A4A4A;
    &.active {
      color: $blue;
    }
  }
}
</style>