@import (reference) "mixins/retina.less";


#djblets-ns-ui() {
  .datagrids() {
    .cells() {
      @height: 1.4em;
      @padding: 4px;

      @bg: #FFFFFF;
      @hover-bg: #D4E0F3;

      @even-bg: #F2F2F2;
      @even-hover-bg: @hover-bg;
    }

    .header() {
      @padding: #djblets-ns-ui.datagrids.cells[@padding];

      @border-color: #999999;
      @drag-border-color: @border-color;
      @sep-border-color: #CCCCCC;
      @text-color: #000000;

      @unsort-icon-color: #444444;
    }

    .menu() {
      @bg: #F0F0F0;
      @border-color: #303030;
      @padding: 0.3em;
    }

    .paginator() {
      @padding: 8px 4px 4px 4px;
      @page-padding: 2px 6px;

      @active-bg-color: #D4E0F3;
      @active-border-color: #CCCCCC;

      @hover-border-color: @active-border-color;
      @hover-bg-color: #9BC0F2;

      @text-color: #000000;
      @count-text-color: #444444;
    }
  }
}


/* These are deprecated in Djblets 2.0. */
@datagrid-cell-height: #djblets-ns-ui.datagrids.cells[@height];
@datagrid-menu-checkbox-size: #djblets-ns-ui.datagrids.cells[@height];


@media screen and (max-width: 720px),
       screen and (max-device-width: 720px) and (orientation: landscape) {
  .datagrid {
    table {
      display: block;
    }

    .datagrid-body {
      tbody th:first-child {
        padding-left: 0.5em;
        text-align: right;
        white-space: nowrap;
      }
    }

    .datagrid-row-continues {
      td, th {
        border-bottom: 0 !important;
      }
    }
  }
}


.datagrid {
  @_cell-vars: #djblets-ns-ui.datagrids.cells();

  border-collapse: collapse;
  width: 100%;

  tr {
    background-color: @_cell-vars[@bg];
    cursor: pointer;

    &:hover {
      background-color: @_cell-vars[@hover-bg];
    }

    &.even {
      background-color: @_cell-vars[@even-bg];

      &:hover {
        background-color: @_cell-vars[@even-hover-bg];
      }
    }

    &:hover.headers {
      background-color: transparent;
    }

    &.datagrid-empty-row {
      background-color: @_cell-vars[@bg];
    }
  }

  td {
    line-height: @_cell-vars[@height];
    padding: @_cell-vars[@padding];

    &.has-link > a {
      /*
       * Ensure the link takes the full width of the cell. Ideally it would
       * also take the full height, but that's a much harder problem to
       * tackle (we could set height: 100%, but vertical alignment breaks).
       */
      display: block;
    }

    a {
      color: black;
      text-decoration: none;
    }
  }

  th.day {
    background-color: #E9E9E9;
    border-bottom: 1px #999999 solid;
  }
}

.datagrid-header {
  @_datagrid-vars: #djblets-ns-ui.datagrids();
  @_header-vars: #djblets-ns-ui.datagrids.header();

  background: url("../images/datagrid/header_bg.png") repeat-x bottom left;
  border-top: 1px @_header-vars[@border-color] solid;
  border-bottom: 1px @_header-vars[@border-color] solid;
  border-right: 1px @_header-vars[@sep-border-color] solid;
  color: @_header-vars[@text-color];
  cursor: pointer;
  font-weight: bold;
  padding: @_header-vars[@padding];
  text-align: left;
  white-space: nowrap;

  &:hover {
    background: url("../images/datagrid/header_bg_primary.png") repeat-x bottom left;

    a {
      text-decoration: underline;
    }
  }

  a {
    color: @_header-vars[@text-color];
    text-decoration: none;

    &.unsort {
      color: @_header-vars[@unsort-icon-color];
    }

    &:hover {
      text-decoration: underline;
    }
  }

  img, div {
    vertical-align: middle;
  }
}

.datagrid-header-drag {
  @_header-vars: #djblets-ns-ui.datagrids.header();

  border: 1px @_header-vars[@drag-border-color] solid;
  border-top: 0;
}

.edit-columns {
  width: 1.2em;
}


/****************************************************************************
 * Titles
 ****************************************************************************/
.datagrid-title,
.datagrid-titlebox {
  background-color: #a2bedc;
  border-bottom: 1px #728eac solid;
  margin: 0;
  padding: 5px 10px 5px 5px;
}

.datagrid-titlebox {
  h1 {
    display: inline;
    font-size: 120%;
    padding-right: 10px;
  }

  ul {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;

    li {
      display: inline;

      a {
        color: #0000CC;
      }
    }
  }
}

/****************************************************************************
 * Paginator
 ****************************************************************************/

.datagrid-wrapper .paginator {
  @_paginator-vars: #djblets-ns-ui.datagrids.paginator();
  @_active-bg-color: @_paginator-vars[@active-bg-color];
  @_active-border-color: @_paginator-vars[@active-border-color];
  @_hover-border-color: @_paginator-vars[@hover-border-color];
  @_hover-bg-color: @_paginator-vars[@hover-bg-color];
  @_text-color: @_paginator-vars[@text-color];
  @_page-padding: @_paginator-vars[@page-padding];

  padding: @_paginator-vars[@padding];

  .current-page {
    font-weight: bold;
    padding: @_page-padding;
  }

  .current-letter {
    border: 1px @_active-border-color solid;
    background-color: @_active-bg-color;
    padding: @_page-padding;
    margin-right: 4px;

    a {
      border: none;
      color: @_text-color;
      padding: @_page-padding;
      text-decoration: none;

      &:hover {
        border: 1px @_hover-border-color solid;
        background-color: @_hover-bg-color;
        color: @_text-color;
      }

      &:visited {
        color: @_text-color;
      }
    }
  }

  .page-count {
    color: @_paginator-vars[@count-text-color];
    margin-left: 10px;
  }

  a {
    border: 1px @_active-border-color solid;
    color: @_text-color;
    padding: @_page-padding;
    text-decoration: none;

    &:hover {
      background-color: @_hover-bg-color;
      border-color: @_hover-border-color;
      color: @_text-color;
    }

    &:visited {
      color: @_text-color;
    }
  }
}


/****************************************************************************
 * Column-specific classes
 ****************************************************************************/
.datagrid {
  .age1 {
    background-color: #beedbc;
    border-left: 1px #8bbd5c solid;
    border-right: 1px #8bbd5c solid;
    white-space: nowrap;

    &:hover {
      background-color: #a1cb9f;
    }
  }

  tr.even .age1 {
    background-color: #b4e3b2;
  }

  .age2 {
    background-color: #ddfa8e;
    border-left: 1px #a3e266 solid;
    border-right: 1px #a3e266 solid;
    white-space: nowrap;

    &:hover {
      background-color: #bcd675;
    }
  }

  tr.even .age2 {
    background-color: #d3f084;
  }

  .age3 {
    background-color: #fdf18c;
    border-left: 1px #d8c158 solid;
    border-right: 1px #d8c158 solid;
    white-space: nowrap;

    &:hover {
      background-color: #d9ce74;
    }
  }

  tr.even .age3 {
    background-color: #f3e782;
  }

  .age4 {
    background-color: #fed3a9;
    border-left: 1px #d49659 solid;
    border-right: 1px #d49659 solid;
    white-space: nowrap;

    &:hover {
      background-color: #dab38e;
    }
  }

  tr.even .age4 {
    background-color: #f4c99f;
  }

  .age5 {
    background-color: #fab6b6;
    border-left: 1px #f56363 solid;
    border-right: 1px #f56363 solid;
    white-space: nowrap;

    &:hover {
      background-color: #d69999;
    }
  }

  tr.even .age5 {
    background-color: #f0acac;
  }

  tr.month {
    background-color: #E9E9E9;
  }

  td.summary {
    cursor: pointer;
  }
}

.datagrid-head,
.datagrid-body {
  border-collapse: collapse;
}

/*
 * Add a single pixel between the thead and the tbody. This will prevent
 * a border from being collapsed between the two, resulting in the same
 * styling that we'll get when separating out the thead into its own
 * table. This prevents a 1px jump.
 */
.datagrid-body thead:after {
  content: "";
  display: block;
  line-height: 1px;
}

.datagrid-main {
  position: relative;
}

.datagrid-menu {
  @_menu-vars: #djblets-ns-ui.datagrids.menu();

  background-color: @_menu-vars[@bg];
  border-left: 1px @_menu-vars[@border-color] solid;
  border-bottom: 1px @_menu-vars[@border-color] solid;
  box-sizing: border-box;
  margin: 0;
  overflow-y: auto;
  right: 0;

  padding: @_menu-vars[@padding];

  table {
    border-collapse: collapse;
  }

  td {
    margin: 0;
    padding: 0;
    white-space: nowrap;

    input {
      vertical-align: baseline;
    }

    div, img {
      vertical-align: sub;
    }
  }

  .datagrid-menu-checkbox, a {
    padding: 0.4em;
  }

  a:link {
    color: black;
    display: block;
    text-decoration: none;

    /*
     * Provide enough room on the right for the scrollbar, so that it doesn't
     * overlap any content when it appears. That would result in a horizontal
     * scrollbar then appearing.
     */
    padding-right: 2em;
  }

  tr:hover {
    .datagrid-menu-checkbox {
      background-color: #E0E0E0;
      cursor: pointer;
    }

    .datagrid-menu-label {
      text-decoration: underline;
    }
  }

  .datagrid-menu-checkbox {
    text-align: center;
    vertical-align: top;

    .datagrid-icon-checkmark {
      vertical-align: sub;
    }
  }
}

.datagrid-menu-checkbox {
  @_cell-vars: #djblets-ns-ui.datagrids.cells();

  border: 1px #C0C0C0 solid;
  height: @_cell-vars[@height];
  width: @_cell-vars[@height];

  img {
    display: block;
    margin: 0 auto;
    margin-top: 0.4em;
  }
}

.datagrid-icon {
  background-repeat: no-repeat;
  display: inline-block;
  overflow: hidden;
  text-indent: -99999px;
  vertical-align: middle;

  .retina('../images/datagrid/icons.png', 66px 16px, @has-svg: true);

  // For IE7
  zoom: 1;
  *display: inline;
}

.icon(@name, @x, @y, @width, @height) {
  .datagrid-icon-@{name} {
    background-position: -@x -@y;
    width: @width;
    height: @height;
  }
}

/*
 * NOTE: Keep these in the same order as found in the spritesheet.
 */
.icon(edit, 1px, 1px, 18px, 14px);
.icon(sort-asc-primary, 21px, 2px, 10px, 5px);
.icon(sort-desc-primary, 21px, 9px, 10px, 5px);
.icon(sort-asc-secondary, 33px, 2px, 10px, 5px);
.icon(sort-desc-secondary, 33px, 9px, 10px, 5px);
.icon(unsort, 45px, 2px, 8px, 8px);
.icon(checkmark, 54px, -1px, 12px, 12px);
