/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Tables

## Default table

```html
<table class="ic-Table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>
```

## Striped table

Add **.ic-Table--striped** to the table element to produce a striped table among rows in the table body.

```html
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>
```

## Condensed table

Add **.ic-Table--condensed** to the table element to reduce the default cell padding.

```html
<table class="ic-Table ic-Table--condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>
```

*/

// Base table styles for Canvas
table {
  max-width: 100%;
  background-color: $tableBackground;
}

// Need to completely hide the border-collapse and
// border-spacing defaults from TinyMCE so the
// user-defined cellspacing attribute still works.
:not(.user_content) > table,
// However, for tables without cellspacing, we do
// want to include the defaults.
.user_content table:not([cellspacing]) {
  border-collapse: collapse;
  border-spacing: 0;
}

$sp-table: $ic-sp + 2;

.ic-Table-responsive-x-scroll {
  overflow-x: auto;
}

.ic-Table {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  th, td {
    padding: $sp-table $sp-table/2;
    line-height: 1.3;
    text-align: direction(left);
    vertical-align: middle;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  tr {
    &.ic-Table__row--bg-neutral { background-color: $ic-bg-light-neutral; }
    &.ic-Table__row--bg-success { background-color: $ic-bg-light-success; }
    &.ic-Table__row--bg-alert { background-color: $ic-bg-light-alert; }
    &.ic-Table__row--bg-danger { background-color: $ic-bg-light-danger; }
  }

  th {
    border-bottom-color: $ic-border-dark;
    padding-bottom: $sp-table/2;
    font-weight: bold;
    // If you need to use headers for the row in order to kick in the bold font for the first cell of the row
    &.ic-Table--header-row {
      border-bottom-color: $ic-border-light;
    }
  }

  tbody th {
    border-bottom-color: $ic-border-light;
    padding-bottom: $sp-table;
  }

  td {
    border-bottom-color: $ic-border-light;
    // If you need to add admin links to the far-right cell, enclose them in .ic-Table--actions
    .ic-Table__actions {
      position: relative;
      text-align: direction(right);
    }
  }

  &.ic-Table--condensed {
    td {
      padding: $sp-table/2;
      @include fontSize($ic-font-size--xsmall);
    }
    th {
      padding: $sp-table/2;
      padding-bottom: $sp-table/4;
    }
    tbody th {
      padding-bottom: $sp-table/2;
      @include fontSize($ic-font-size--xsmall);
    }
  }

  &.ic-Table--striped {
    tbody {
      tr:nth-child(odd) { background-color: $ic-bg-light-neutral; }
    }
  }

  &.ic-Table--hover-row {
    tbody {
      // High contrast UI uses left and right borders to show row hover state
      @if $use_high_contrast {
        tr {
          transition: border-color 0.3s;
          border: 4px solid transparent;
          border-top: none; border-bottom: none;
          &:hover { border-color: var(--ic-brand-primary); }
        }
      }

      // Regular UI uses zebra stripes
      @else {
        tr { transition: background-color 0.3s; }
        tr,
        tr.ic-Table__row--bg-neutral,
        tr.ic-Table__row--bg-success,
        tr.ic-Table__row--bg-alert,
        tr.ic-Table__row--bg-danger {
          &:hover { background-color: $ic-bg-light-primary; }
        }
      }

    }
  }
}
