/*
 *
 * TABLE ACTION BAR STYLING
 *
 */

$tab-height: 60px
$tab-font-size: 20px

.bui-table-action-bar
  @extend .clear-after
  width: 100%
  height: $tab-height
  padding: 0 20px
  background-color: white

  .bui-table-text-holder
    float: left
    padding: 10px 0
    line-height: 40px
    font-weight: 500
    color: $grey-800
    .table-active-selections-label
      color: $cyan-500
    .bui-table-action-header-buttons
      position: relative
      left: -4px
      p
        margin-right: 25px
        float: left
        cursor: pointer
        color: $cyan-500
        font-size: 14px
        text-transform: uppercase
      i
        font-size: 20px
        margin-right: 8px
        top: 2px
        position: relative

  .bui-table-actions-holder
    @extend .clear-after
    float: right
    margin-right: -8px /* Fixes length problem on the right side */

    .bui-table-search
      float: left
      .bui-input-field
        display: none
        width: 250px
        max-width: 250px
        margin: 15px 0 14px 13px
        .input-underlines
          display: none
        .input-icon-holder
          .input-icon
            font-size: $tab-font-size
        .input-text-value
          input[type='text']
            padding-left: 30px
        .input-text-hint
          left: 30px
      &.display-search
        .bui-input-field
          display: block
        .table-icon
          display: none

    .bui-table-toggle-filter-button
      float: left
      position: relative
      &.bui-inactive-filter-button
        .table-icon
          color: $grey-300
          cursor: initial
          &:hover
            color: $grey-300
      .toggle-filter-text
        position: absolute
        top: 10px
        right: 0
        font-size: 12px
        padding: 2px 4px
        background-color: $cyan-500
        font-weight: 500
        color: white
        border-radius: 4px

    .table-icon
      width: 40px
      line-height: 59px
      text-align: center
      font-size: $tab-font-size
      color: $grey-600
      cursor: pointer
      &:hover
        color: $grey-800