@import '../../../styles/mixins'
.vs-table__th
  padding: 10px 12px
  text-align: left
  transition: all .25s ease
  font-size: .8rem
  border: 0px
  &.sort
    .vs-table__th__content
      pointer-events: none
    &:hover
      background: -color('gray-3')
  &[data-sort-type='asc']
    .icon-sort-2
      margin-top: -7px
      transform: rotate(45deg) !important
    .icon-sort-1
      margin-top: -1px
      transform: rotate(45deg) !important
  &[data-sort-type='desc']
    .icon-sort-2
      margin-top: -7px
    .icon-sort-1
      margin-top: -1px
      transform: rotate(-135deg) !important
  &__content
    display: flex
    align-items: center
    justify-content: flex-start
    transition: all .25s ease
    &__icons
      display: flex
      align-items: center
      justify-content: center
      flex-direction: column
      margin-left: 7px
      transform: scale(.8)
    .vs-icon-arrow
      position: relative
      display: block
      &.icon-sort-1
        transform: rotate(45deg)
      &.icon-sort-2
        transform: rotate(-135deg)