@import '../mixins/common.styl'

$table-border-style = 1px solid $grey-200
$table-cell-padding = 22px

.mp-table
  background-color $white
  border-radius 6px
  box-shadow 0 1px 4px 0 alpha(black, 0.1)
  color $grey-700
  cursor default

+prefix-classes('mp-table-')
  .header
    align-items center
    border-bottom $table-border-style
    display flex
    font-size-medium()
    font-weight $weight-bold
    height $table-header-height

    .header-title
      color $grey-700
      font-size-large()
      font-weight $weight-bold

  .titles
    background-color $grey-50
    border-bottom $table-border-style
    display flex
    height 39px

  .title-cell
    align-items center
    display flex
    flex 1 1
    font-size-small()
    font-weight $weight-bold
    padding 0 $table-cell-padding

    &:not(.sort-column)
      .sort-controls
        visibility hidden

    &.can-sort:hover
      cursor pointer
      .sort-controls
        visibility visible

  .body
    cursor pointer
    display flex
    flex-direction column

  .row
    align-items center
    border-bottom $table-border-style
    display flex
    flex-direction row
    height 60px
    position relative

    &:last-child
      border-bottom none

    .new-row-indicator
      border-color $mp-yellow transparent transparent transparent
      border-style solid
      border-width 16px 16px 0 0
      height 0
      left 0
      position absolute
      top 0
      width 0

  .cell
    align-items center
    display flex
    flex 1 1
    font-size-default()
    font-weight $weight-regular
    height 20px
    line-height 1.4
    padding 0 $table-cell-padding

    &.action-cell
      font-weight $weight-medium

  .body-clickable
    .row:hover
      background-color $grey-50

      &:last-child
        border-bottom-left-radius 6px
        border-bottom-right-radius 6px

      .action-cell
        color $mp-blue

  .sort-controls
    align-items center
    display flex
    flex-direction column
    margin-left 6px
    svg-icon-style($grey-500, size: 14px)

    &.sort-asc
      .sort-caret-down
        svg-icon-style($grey-900, size: 14px)

    &.sort-desc
      .sort-caret-up
        svg-icon-style($grey-900, size: 14px)

    .sort-caret-up
      height 6px

    .sort-caret-down
      height 14px