@import '../bootstrap'
@import '../theme'

/* Theme */
datatable($material)
  thead
    th.column.sortable
      i
        color: rgba($material.fg-color, $material.disabledORhints-text-percent)

      &:hover
        color: rgba($material.fg-color, $material.primary-text-percent)

      &.active
        color: rgba($material.fg-color, $material.primary-text-percent)

        i
          color: rgba($material.fg-color, $material.primary-text-percent)

  .datatable__actions
    background-color: $material.cards
    color: rgba($material.fg-color, $material.secondary-text-percent)
    border-top: 1px solid rgba($material.fg-color, $material.divider-percent)

    &__select
      .input-group--select
        .input-group__selections__comma
          color: rgba($material.fg-color, $material.secondary-text-percent) !important

        .input-group__append-icon
          color: rgba($material.fg-color, $material.secondary-text-percent) !important

theme(datatable, "datatable")

.datatable
  thead
    th.column.sortable
      cursor: pointer

      i
        font-size: 16px
        vertical-align: sub
        display: inline-block
        opacity: 0
        transition: .3s $transition.swing

      &:hover
        i
          opacity: .6

      &.active
        transform: none

        i
          opacity: 1

        &.desc
          i
            transform: rotate(-180deg)

/** Actions */
.datatable__actions
  display: flex
  justify-content: flex-end
  align-items: center
  font-size: 12px
  flex-wrap: wrap-reverse

  .btn
    color: inherit

    &:last-of-type
      margin-left: 14px

  &__range-controls
    display: flex
    align-items: center
    min-height: 48px

  &__pagination
    display: block
    text-align: center
    margin: 0 32px 0 24px

  &__select
    display: flex
    align-items: center
    justify-content: center
    margin-right: 14px

    .input-group--select
      margin: 13px 0 13px 34px
      padding: 0
      position: initial

      .input-group__selections__comma
        font-size: 12px

.datatable__progress
  height: auto !important

  tr, td, th
    height: auto !important

  th
    padding: 0 !important

    .progress-linear
      top: -2px
      margin: 0 0 -2px

.datatable__expand
  &-row
    border: none !important

  &-col
    padding: 0 !important
    height: 0px !important

    &--expanded
      border-bottom: 1px solid rgba(0,0,0,0.12)

  &-content
    transition: height $primary-transition

    > .card
      border-radius: 0
      box-shadow: none