// Imports

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

// Variables
$ng2-table-base-color: #f0f0f0 !default;
$ng2-table-indicator-color: #000 !default;
$ng2-table-base-padding: 2px !default;
$ng2-table-base-brand-color: #2196f3 !default;
$ng2-table-secondary-text-color: #fff !default;
$ng2-table-global-search-max-width: 300px !default;

// @extend-Only Selectors

%ng2-table-input {
  border: 0;
  font-size: .9em;
  margin: 0;
  padding: $ng2-table-base-padding;
  width: 100%;
}

%ng2-table-button {
  background: $ng2-table-base-color;
  border: 1px solid darken($ng2-table-base-color, 10%);
  font-size: .8em;
  padding: $ng2-table-base-padding * 3;
}

// Table

.ng2-table {
  &__table,
  &__table--striped {
    border-spacing: 0;
    width: 100%;

    td,
    th {
      border-color: $ng2-table-base-color;
      border-style: solid;
      border-width: 1px 1px 0 0;
      margin: 0;
      padding: $ng2-table-base-padding;
    }

    thead > th {
      cursor: pointer;
      font-weight: 700;
      text-align: left;
    }

    tr:last-child th {
      border-bottom-color: darken($ng2-table-base-color, 15%);
    }

    tr:last-child td {
      border-bottom: 1px solid $ng2-table-base-color;
    }

    tr td:first-child,
    tr th:first-child {
      border-left: 1px solid $ng2-table-base-color;
    }

  }

  &__table--striped {
    tbody tr:nth-child(odd) {
      background: $ng2-table-base-color;
    }
  }

  &__input {
    @extend %ng2-table-input;
  }

  &__button {
    @extend %ng2-table-button;
  }

  &__csv-export-button {
    @extend %ng2-table-button;
    display: inline-block;
    float: right;
    margin: $ng2-table-base-padding * 3 0;
  }

  &__global-search-label {
    border: 1px solid $ng2-table-base-color;
    display: inline-block;
    margin: $ng2-table-base-padding * 3 0;
    padding: $ng2-table-base-padding;
    width: $ng2-table-global-search-max-width;

    &::before {
      color: darken($ng2-table-base-color, 15%);
      content: '\f002';
      font-family: 'FontAwesome', sans-serif;
      left: $ng2-table-global-search-max-width - 10px;
      position: absolute;
      top: 18px;
      z-index: 1;
    }
  }

  &__sort-indicator {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    float: right;
    font-size: 0.5em;
    height: 0;
    padding-top: $ng2-table-base-padding * 2;
    width: 0;
  }

  &__sort-indicator--up {
    border-bottom: 5px solid $ng2-table-indicator-color;
  }

  &__sort-indicator--down {
    border-top: 5px solid $ng2-table-indicator-color;
  }

// Pagination

  &__pagination,
  &__items-per-page {
    display: inline-block;
    float: left;
    list-style-type: none;
    margin: $ng2-table-base-padding * 4 0;
    padding: 0;

    li {
      border: 1px solid $ng2-table-base-color;
      float: left;
      margin: 0;
      padding: $ng2-table-base-padding * 3;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .active {
      background: $ng2-table-base-brand-color;
      border-color: darken($ng2-table-base-brand-color, 10%);
      color: $ng2-table-secondary-text-color;
    }
  }

  &__items-per-page {
    float: right;
  }

  &__pagination-wrapper {
    &::after {
      clear: both;
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
    }
  }
}