/**
 * Replacement CSS for original datatables CSS +/- workarounds for vis-ui-specific quirks
 * @todo: if this is a common Mapbender widget, it should be extracted from vis-ui so markup and CSS can be developed together
 * @todo: remove icon hacks (incompatible with FA5)
 * @todo: use datatables original css; only adjust for colors
 */
.mapbender-element-result-table {

  > .dataTables_wrapper {

    > table[role="grid"] {
      td, th {
        padding: 4px;
      }
      > thead > tr > th {
        background-color: $buttonFirstColor;
        user-select: none;
        border: 1px solid $buttonSecondColor;
        &:last-child {
          // match calculated with of .buttons column
          border-right: none;
        }
        color: #ffffff;
        font-weight: normal;

        &.sorting, &.sorting_asc, &.sorting_desc {
          cursor: pointer;
          &:hover {
            background-color: $buttonSecondColor;
          }
          &:before {
            margin-right: 0.5em;
          }
        }

        &.sorting_asc, &.sorting_desc {
          background-color: $buttonFirstActiveColor;
        }
        &.sorting:before {
          display: inline-block;
          content: "\f0dc";
          font-family: FontAwesome;
        }
        &.sorting_asc:before {
          display: inline-block;
          content: "\f160";
          font-family: FontAwesome;
        }
        &.sorting_desc:before {
          display: inline-block;
          content: "\f161";
          font-family: FontAwesome;
        }
      }
      > tbody > tr {
        > td {
          &.buttons {
            text-align: right;
            white-space: nowrap;
            border-top: none;   // undo Bootstrap 1px top border on .table > tbody > tr > td
            padding: 0;
            > div.button-navigation {
              display: inline-block;
            }
            .button {
              padding: 3px 3px 2px 4px;
              border-right-width: 0;
            }
            .button:last-child {
              border-right-width: 1px;
            }
          }

          &.selection {
            padding-top: 0;
            vertical-align: middle;
            > input[type="checkbox"] {
              margin: 0 auto;
              vertical-align: middle;
            }
          }
        }
      }
      margin-bottom: 0;
    }

    > .dataTables_info {
      margin-top: 8px;
      text-align: center;
      border-radius: 7px;
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #6FB536;
      right: 0;
    }
    .dataTables_paginate {
      // clearfix; should be redundant with original css
      &:before,
      &:after {
        display: table; // 2
        content: " "; // 1
      }
      &:after {
        clear: both;
      }
    }

    > .paging_simple_numbers {

      > span {
        display: inline-block;
        > span {
          padding-right: 5px;
        }
      }

      a.paginate_button {
        @extend .button;

        &.previous {
          float: left;
          font-size: 0;
          &:before{
            @include buttonFAIcon("\f177");
          }
        }

        &.next {
          float: right;
          font-size: 0;
          &:after{
            @include buttonFAIcon("\f178");
          }
        }

        &.current {
          background-color: $buttonFirstActiveColor;
        }

        &.disabled {
          display: none;
        }
      }
      a.paginate_button + a.paginate_button {
        border-left: none;
      }
    }
  }
}
