/**
 * Ember table styles
 */

table,
thead,
tfoot,
tbody,
tr,
th,
td {
  white-space: normal;
  text-align: left;
}

table {
  /* Firefox has issues with tables aligning to the right and off the page. */
  clear: both; 
  border-spacing: 0;
  margin: 0 0 2em;
  overflow: scroll;
}

caption,
tfoot {
  @extend %font-serif-italic;
}

table { 
  thead {
    border-top: $base-border-width solid $color-border;
  }

  tfoot {
    border-bottom: $base-border-width solid $color-border;
  }

  tbody {
    border-collapse: collapse;
    border-top: $base-border-width solid $color-border; 
  }
}

tr {
  &.odd,
  &.even {
    background-color: transparent;

    .form-item,
    .form-actions {
      margin: 0;
      padding: 0;
    }
  }

  &.region-title  {
    background-color: transparent;
    border: 0px solid transparent;
  }

  &:hover td {
    background-color: $color-background;
  }

  &.selected td {
    background-color: $color-selected;
  }
  /* Exception for webkit bug with the right border of the last cell in some
  * tables, since it's webkit only, we can use :last-child */
  &:last-child {
    border-right: none; /* LTR */
  }
  &.active, 
  &.dblog-access-denied .active,
  &.dblog-page-not-found .active {
    background: $color-background;
  }
}

td > a:hover,
th > a:hover,
th.active > a:hover {
  cursor: pointer;
  text-decoration: none;
  color: $color-link-hover;
}

th.active {
  white-space: nowrap; & {
    & > a {
      color: $color-text;
    }
  } 
}

td,
th {
  padding: 0.5rem 1rem;
}

th a {
  padding: 0 2rem 0 0;
}
th.active a img {
  position: absolute;
  top: 25%;
  right: 1em;
  margin: 0;
}

/* :before pseudo-classes create the border bottom and background that will be altered for affordances for sortable columns. 
 * :before is used bacause we can't change attributes on the parent of the link */
th {
  &:before,
  a:hover:before,
  &.active a:before {
    content: "";
    position: absolute;
    width: 100%;
    left: 0px;
  }
  &:before {
    top: -2px;
    height: 100%;
    background-color: $color-background-lightest;
    z-index: -1; 
  }
  a:hover:before {
    border-bottom: 2px solid $color-link;
    top: 0px;
    background-color: $color-background;
    height: 95%;
    z-index: -1; 
  }
  &.active a:before {
    border-bottom: 2px solid $color-link-alternate;
    top: -2px;
    background-color: $color-background;
    height: 100%;
    z-index: -1;
  }
}

th {
  @extend %font-sansserif-bold;
  font-size: .9em;
  color: $color-text-light;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0;
  position: relative;
  white-space: nowrap;
}

td {
  vertical-align: top;
  border-bottom: $base-border-width solid $color-border;

  a & {
  color: $color-link;
  cursor: pointer;

    &:hover {
    color: $color-link-hover;
    }
  }
  
  &.status,
  &.ok {
   background-color: transparent;
  }
  ul.inline {
    margin: 0;
  }
  &.description {
    opacity: 1;
    background-color: inherit;
    transition: none;
  }
}

th a,
td a {
  text-decoration: none;
}

td ul,
td ol,
td li.first,
td li.last,
td li  {
  padding: 0;
  margin: 0;
  line-height: normal;
}

/* Remove padding from lists inside tables */
[dir="ltr"] td {
  ul, 
  ol {
    padding-left: 0;
  }
}
[dir="rtl"] td {
  ul, 
  ol {
    padding-right: 0;
  }
}

.sticky-header {
  z-index: 2;
}



@media (max-width: 680px) {
  table {
    display: block;
  }
  tr { 
    position: relative;
  }
  th:nth-child(2),
  td:nth-child(2) {
    position: absolute;
    left: 0;
    display: block;
    width: 30%;
    margin: 0;
    background-color: $color-background;
    border-right: 1px solid $color-border;
    z-index: 2;
  }
  td,
  th {
    &:nth-child(1) {
      padding-left: 250px;
    }
  }
}

/* overrides */


/* on these forms/pages make column 1 widest */
#permissions,
.page-admin-structure-menu,
.page-admin-reports-updates,
form#block-admin-display-form table,
table#shortcuts {
  th,
  td {
    &:first-child {
      width: 100%;
    }
  }
}

/* on these forms/pages make description column widest */
form#system-modules {
  th,
  td {
    &:nth-child(4),
    &.description {
      min-width: 300px;
    }
  }
  .module-filter-tabs-processed {
    th,
    td {
      &:nth-child(4) {
        min-width: 0;
      }
    }
  }
}

/* for these types of tables and on these pages make the last column widest */
.table-select-processed {
  td,
  th {
    &:last-child {
      width: 100%;
    }
  }
}

.view-workbench-edited th.views-field.views-field-timestamp {
  width: 100%;
}

/* on these pages align last child column right */
#comment-admin-overview {
  td,
  th {
    &:last-child {
      text-align: right;
    }
  }
}

/* on multi-select tables the second column is primary, thus nth child 2 is used to emphasize the primary column,
 * also last column is always operations so align right and set width to 100% to push other cols left.
 */

form#node-admin-content table {
  td,
  th {
    white-space: nowrap;
    &:first-child {
      padding: 0.5rem 1rem;
    }
    &:nth-child(2) {
      font-weight: bold;
    }
    &:last-child {
      text-align: right;
      width: 100%;
    }
  }
}

#dashboard_main {
  th,
  td {
    &:first-child {
      font-weight: bold;
    }
  }
}


.view-workbench-edited,
.view-workbench-recent-content {
  td.views-field-changed,
  td.views-field-type,
  td.views-field-title,
  td.views-field-status {
    white-space: nowrap;
  }
  th.views-field-edit-node,
  td.views-field-edit-node {
    text-align: right;
  }
}

td ul.links li, ul.inline li {
  padding-right: 0;
}

.update > tr.warning {
background: #ffd;
}

.update tr.warning .version-recommended {
  background: transparent;
}

.draggable .tabledrag-handle {
  float: left;
}