/**
 * Office UI Fabric JS 1.5.0
 * The JavaScript front-end framework for building experiences for Office 365.
 **/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Data table styles

.ms-Table {
  @include ms-baseFont;
  display: table;
  width: 100%;
  border-collapse: collapse;
}

// makes the table cells not expand with the content, keeping the table cells at a fixed size
.ms-Table--fixed {
  table-layout: fixed;
}

.ms-Table tr,
.ms-Table-row {
  display: table-row;
  line-height: 30px;
  font-weight: $ms-font-weight-semilight;
  font-size: $ms-font-size-s;
  color: $ms-color-neutralPrimary;

  // Rows can be selected.
  &.is-selected {
    background-color: $ms-color-themeLight;

    // A checkmark in a selected row.
    .ms-Table-rowCheck {
      background-color: $ms-color-themePrimary;

      // Hide the checkbox.
      &::before {
        display: none;
      }

      // But show the mark.
      &::after {
        @include ms-Icon--CheckboxComposite;
        color: $ms-color-white;
      }
    }
  }
}

.ms-Table th,
.ms-Table td,
.ms-Table-cell {
  display: table-cell;
  padding: 0 10px;
}

// Style the first row as a header.
.ms-Table thead th,
.ms-Table-head {
  font-weight: $ms-font-weight-semilight;
  font-size: $ms-font-size-xs;
  color: $ms-color-neutralSecondary;
}

.ms-Table thead,
.ms-Table-head {
  td,
  th,
  .ms-Table-cell,
  .ms-Table-rowCheck {
    font-weight: normal;
    text-align: left;
    border-bottom: 1px solid $ms-color-neutralLight;
  }
}

// On selectable tables, each row has a checkbox.
.ms-Table-rowCheck {
  display: table-cell;
  width: 20px;
  position: relative;
  padding: 0;

  // Empty checkbox.
  &::after {
    @include ms-Icon;
    @include ms-Icon--Checkbox;
    color: $ms-color-neutralTertiary;
    font-size: 12px;
    position: absolute;
    left: 4px;
    top: 1px;
  }
}

// A table with selectable rows
.ms-Table--selectable {
  tr:hover,
  .ms-Table-row:hover {
    background-color: $ms-color-neutralLighter;
    cursor: pointer;
    outline: 1px solid transparent;
  }
}

// All high contrast styling rules
@media screen and (-ms-high-contrast: active) {
  .ms-Table-row {
    // Rows can be selected.
    &.is-selected {
      // A checkmark in a selected row.
      .ms-Table-rowCheck {
        background: none;

        // Show the checkbox.
        &::before {
          display: block;
        }
      }
    }
  }
}