/**
 * A review request field for tabular data and filtering.
 */

@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/layout/helpers.less";
@import (reference) "rb/css/ui/tabs.less";


#rb-ns-review-requests() {
  .fields() {
    .tabular() {
      .common() {
        @border-width: 1px;
      }

      .data() {
        @cell-bg: #FFFFFF;
        @cell-padding: 8px;
      }

      .tabs() {
        @margin-left: 2.5em;
        @mobile-margin-left: 0.5em;
      }
    }
  }
}


/**
 * A field for tabular data, with optional filter widgets and tabs.
 *
 * This wraps a table of data, offering consistent styling for headers and
 * cells. It also optionally supports filtering tabs through the
 * ``.rb-c-tabs`` elements, and additional custom filtering controls through
 * ``.rb-c-review-request-field-tabular__filters``.
 *
 * Structure:
 *     <div class="rb-c-review-request-field-tabular">
 *      <header class="rb-c-review-request-field-tabular__header">
 *       <div class="rb-c-review-request-field-tabular__filters">
 *        <div class="rb-c-review-request-field-tabular__filter">
 *         ...
 *        </div>
 *        ...
 *       </div>
 *       <ul class="rb-c-tabs">
 *        ...
 *       </ul>
 *      </header>
 *      <table class="rb-c-review-request-field-tabular__data">
 *       <thead>
 *        <tr>
 *         <th class="-is-sortable">...</th>
 *         ...
 *        </tr>
 *       </thead>
 *       <tbody>
 *        ...
 *       </tbody>
 *      </table>
 *     </div>
 */
.rb-c-review-request-field-tabular {
  @_common-vars: #rb-ns-review-requests.fields.tabular.common();
  @_data-vars: #rb-ns-review-requests.fields.tabular.data();
  @_tabs-vars: #rb-ns-review-requests.fields.tabular.tabs();
  @_color-vars: #rb-ns-ui.color-schemes.grey();
  @_border-width: @_common-vars[@border-width];
  @_cell-padding: @_data-vars[@cell-padding];

  /*
   * TODO: this margin shouldn't be dependent on textarea rules, but should be
   * moved into a generic review request field rule.
   */
  margin: var(--rb-c-textarea-margin);
  width: 100%;

  /**
   * A container for any filters to show above the table.
   *
   * By default, filters will be positioned to the top-right of the table,
   * in the same area as any defined tabs. Consumers may need to offer further
   * styling to customize this.
   */
  &__filters {
    position: absolute;
    bottom: 0;
    list-style: none;
    right: @box-padding;
    margin-bottom: 1em;

    .on-mobile-medium-screen-720({
      position: initial;
      text-align: right;
    });
  }

  &__filter {
    display: inline-block;
  }

  /**
   * The header area, containing the filters and tabs for the table.
   */
  &__header {
    margin: 1.5em 0 -@_border-width 0;
    padding-bottom: 0;
    position: relative;
  }

  /**
   * The table data.
   *
   * This is a standard table, which can contain any data.
   *
   * Each table header (a ``<th>`` nested within a ``<thead>``) can have a
   * ``-is-sortable`` modifier class indicating that the header is clickable.
   */
  &__data {
    border: var(--ink-c-data-table-border);
    border-radius: @box-border-radius;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;

    tbody {
      background: var(--ink-c-data-table-body-bg);
      color: var(--ink-c-data-table-body-fg);

      tr {
        background: var(--ink-c-data-table-row-bg);

        &.-is-hidden {
          display: none;
        }
      }

      td {
        padding: var(--ink-c-data-table-cell-padding);
        vertical-align: top;
      }
    }

    thead {
      th {
        color: var(--ink-c-data-table-header-fg);
        cursor: pointer;
        padding: var(--ink-c-data-table-cell-padding);
        text-align: left;
        white-space: nowrap;

        &.-is-sortable:hover {
          text-decoration: underline;
        }
      }

      tr {
        background: var(--ink-c-data-table-header-bg);
      }
    }
  }

  .rb-c-tabs {
    margin-left: @_tabs-vars[@margin-left];

    .on-mobile-medium-screen-720({
      margin-left: @_tabs-vars[@mobile-margin-left];
    });
  }
}
