/* -- Material Design Table style -------------- */

// Bootstrap Variables
// ---------------------
@table-cell-padding : 15px;
@table-bg-accent    : #f9f9f9;
@table-bg-hover     : #f5f5f5;

// Variables
// ---------------------
@table-header-font-color       : #ffffff;
@table-header-background-color : #65afa0;
@table-header-font-color-sm    : @table-header-background-color;
@table-pagination-border-color : #dddddd;
@table-header-width-sm         : 768px;


.table-pretty {

  tr {
      input {
      vertical-align : middle;
      margin         : 0;
      padding        : 0 5px;
    }
  }

  thead tr th{
    background-color : @table-header-background-color;
    color            : @table-header-font-color;
    border-bottom    : none;
    padding          : 5px;
    vertical-align   : middle;

    label {
      margin  : 0;
      padding : 0;
    }

    span {
      display : inline-block;
    }

    .table-pretty-filter {
      margin-left : 5px;

      .fa.fa-sort {
        opacity : 0.5;
      }
    }
    &:hover {
      .table-pretty-filter .fa.fa-sort{
        opacity : 1;
      }
    }
  }
  > tbody {
    tr td {
      padding        : 15px 5px;
      vertical-align : top;
    }

    label {
      margin      : 0;
      padding     : 0;
      font-weight : normal;
    }
  }

  > tbody + tbody {
    border-top : none;
  }

  &.table-striped {
    > tbody.reverse-table-striped {
      > tr:nth-of-type(odd) {
        background-color : transparent;
      }
      > tr:nth-of-type(even) {
        background-color : @table-bg-accent;
      }
    }
  }
}



// Responsive tables (vertical)
.table-responsive-vertical {

  @media screen and (max-width: @table-header-width-sm) {

    // Tighten up spacing
    > .table-pretty {
      margin-bottom    : 0;
      background-color : transparent;
      > thead,
      > tfoot {
        display : none;
      }

      > tbody {
        display : block;

        > tr {
          display       : block;
          border-radius : 2px;
          margin-bottom : 15px;

          > td {
            display        : block;
            vertical-align : middle;
          }
          > td[data-title]:before {
            content      : attr(data-title);
            margin-right : 5px;
            float        : left;
            font-size    : inherit;
            font-weight  : bold;
            color        : @table-header-font-color-sm;
            width        : 100%;
	    text-align   : left !important;
            word-wrap    : break-word;
          }
        }
      }
    }

    // Special overrides for shadows
    &.shadow-z-1 {
      box-shadow : none;
      > .table-pretty > tbody > tr {
        border : none;
        .shadow-z-1;
      }
    }
  }
}


.table-pretty-pagination .pagination-container{

    .pagination {
        margin: 0;

        li {
            > a  {
                font-size : 12px;
                height    : 30px;
                padding   : 7px 10px;
            }

            &:first-child,
            &:first-child+li,
            &:last-child,
            &:nth-last-child(2){
                a {
                    font-size : 20px;
                    padding   :0px 10px;
                }
            }

            &.disabled {
                opacity : 0.5;
            }
        }
    }

    .pagination-page-input {
        width         : 100px;
        margin-left   : 10px;
        height        : 30px;
        border        : 1px solid @table-pagination-border-color;
        border-radius : @border-radius-base;
    }

    .pagination-page-size {
        background    : white;
        height        : 30px;
        border        : 1px solid @table-pagination-border-color;
        border-radius : @border-radius-base;
    }
}