@import "inc/bootstrap";

.datalist {
  max-width: 1024px;
  margin: auto;

  h1 {
    font-family: $headingFont;
    @include font-size(22);
    font-weight: normal;
  }
  h2 {
    font-family: $headingFont;
    @include font-size(18);
    margin: 30px 0 10px;
  }

  .list {
    width: 100%;

    .action-bar {
      margin: 10px 0;
      .btn-info {
        overflow: hidden;
        background: transparent;
        border: 1px white(.3) solid;
      }
    }

    table {
      &.matrix {
        th {
          vertical-align: top;
        }
        tr.selected {
          background: $darkBlueGrey;
        }
      }
      &.hoverable {
        tr:hover {
          background: $lightBlueGrey;
          cursor: pointer;
        }
      }
      th {
        cursor: not-allowed;
        [data-sort-by] {
          cursor: pointer;
        }
        .sorted {
          &:after {
            float: right;
          }
          &.sorted_asc::after {
            @include tao-icon-setup;
            @include icon-down;
          }
          &.sorted_desc::after {
            @include tao-icon-setup;
            @include icon-up;
          }
        }
      }
      tr {
        &.selected {
          background: $darkBlueGrey;
        }
      }
      th,
      td {
        &.checkboxes {
          width: 20px;
          text-align: center;
        }
        &.actions {
          text-align: center;
          width: 20px;
          overflow: visible;
          padding: 2px 10px;
        }
        button {
          text-transform: capitalize;
        }
      }
    }
  }

  &.loading {
    .loading {
      display: inline-block;
    }
    .list, .empty-list, .available-list {
      display: none;
    }
  }
  &.loaded {
    .list, .available-list {
      display: inline-block;
    }
    .loading, .empty-list {
      display: none;
    }
  }
  &.empty {
    .empty-list {
      display: inline-block;
    }
    .loading, .list, .available-list {
      display: none;
    }
  }
  &.selectable {
    td.label {
      cursor: default;
    }
  }
}