@import '~styles/mixins';
@import '~styles/adminMixins';
@import '~styles/items/checkedBox';

.CustomFixedTable {
  position: relative;
  height: 100%;
  padding-top: $height_page_header;
  padding-bottom: $height_page_footer;

  &.no-header {
    padding-top: 0px;
  }

  .header {
    @include fixedHeader;
  }

  .footer {
    @include fixedFooter;
  }

  &.filters {
    padding-top: $height_filters;
  }

  .filters {
    @include fixedStructure;
    // background-color: $color_dark;
    height: $height_filters;
    border-bottom: 1px solid $color_border;
    top: 0;
  }

  $height_table_header: 42px;

  .listing {
    height: 100%;
    width: 100%;
    overflow: auto;
  }

  .table-wrapper {
    height: 100%;
    position: relative;
    padding-top: $height_table_header;
    min-width: $table_min_width;

    .table-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $height_table_header;
      border-bottom: 1px solid $color_border;
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);

      th {
        height: $height_table_header;
      }
    }

    .table-content {
      height: 100%;
      overflow: auto;
    }

    .box-wrapper {
      @include checkedBox;
    }

    table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
    }

    .headItem {
      padding: $table_head_spacing;

      &.empty {
        padding: 0;
      }

      &.center {
        text-align: center;
      }
    }

    .sortable-head {
      width: 100%;
      cursor: pointer;
      padding-right: 30px;
      position: relative;

      .arrow {
        @include v_align;
        right: 8px;

        &.inverted {
          transform: translateY(-50%) rotate(180deg);
        }
      }
    }

    th {
      font-size: 12px;
      color: $color-grey-font;
      text-transform: uppercase;
      vertical-align: middle;
      //opacity: 0.6;
      text-align: left;
      user-select: none;
      @include cellStyle;
    }

    td,
    th {
      vertical-align: middle;
    }

    tbody {
      tr {
        border-top: 1px solid $color_border;

        &:first-child {
          border-top: none;
        }
      }
    }
  }

  .no-result,
  .loading {
    padding: 20px;
    //background-color:$color-grey-background;
    text-align: center;

    .loading-item {
      width: 40px;
      display: inline-block;
    }
  }

  .pages {
    font-size: 12px;
    margin-top: 15px;
    text-align: right;

    li {
      @include middle;
      list-style: none;
    }

    a {
      outline: none;
    }

    .page {
      a {
        border: 1px solid $color_border;
        @include ball(25px);
        background-color: white;
        border-radius: $border_radius;

        &:hover {
          cursor: pointer;
          background-color: $color-grey-background;
        }
      }

      &.active {
        font-weight: bold;
      }

      margin: 0 4px;
    }

    .disabled {
      a {
        cursor: default;
      }

      opacity: 0.5;
    }
  }

  .legend {
    @include legend;

    .item {
      position: relative;
      cursor: pointer;

      &:hover:before,
      &.selected:before {
        content: '';
        @include absolute-fill;
        background-color: rgba(255, 255, 255, 0.15);
      }
      &.selected {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
      }
    }
  }
}
