@import (reference, less) "~@/assets/less/ant.less";

.table-visualization-container {
  .ant-pagination.ant-table-pagination {
    float: none;
    display: block;
    text-align: center;
    margin-bottom: 0;
  }

  .ant-table {
    overflow-x: auto;
  }

  table {
    border-top: @border-width-base @border-style-base @border-color-split;
    border-bottom: 0;

    .display-as-number,
    .display-as-boolean,
    .display-as-datetime,
    .display-as-image {
      width: 1%;
      white-space: nowrap;
    }

    .table-visualization-spacer {
      padding-left: 0;
      padding-right: 0;

      & > div:before {
        content: none !important;
      }
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    thead {
      .anticon.off {
        opacity: 0;
      }

      &:hover .anticon.off,
      .table-visualization-column-is-sorted .anticon.off {
        opacity: 1;
      }

      th {
        white-space: nowrap;

        &.table-visualization-search {
          padding-top: 0;

          .ant-table-header-column {
            display: block;
          }
        }

        .ant-input-search {
          font-weight: normal;

          .ant-input-suffix .anticon {
            cursor: auto;
          }
        }

        // optimize room for th content
        &.ant-table-column-has-actions.ant-table-column-has-sorters {
          padding-right: 3px;
        }

        .table-visualization-heading {
          display: inline-block;
          max-width: 200px;
          vertical-align: middle;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &[data-sort-column-index]:before {
            @size: 12px;

            content: attr(data-sort-column-index);
            display: inline-block;
            vertical-align: middle;
            min-width: @size;
            height: @size;
            font-size: @size * 3/4;
            border-radius: @size / 2;
            background: #c0c0c0;
            text-align: center;
            line-height: @size;
            color: #fff;
            padding: 0 @size * 1/4;
            margin: 0 5px 0 0;
          }
        }
      }
    }
  }

  /* START table x scroll */
  .dashboard-widget-wrapper:not(.widget-auto-height-enabled) & {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    & div {
      height: inherit;
    }

    .ant-spin-container {
      display: flex;
      flex-direction: column;

      .ant-table {
        flex-grow: 1;
      }
    }
  }
  /* END */
}