//extends bootstrap's .table, .table-responsive, and .d-md-table to create a responsive table with md breakpoint. Includes font and margin styles.
/// Usage: class="table mmui-table"
/// Usage: class="table-responsive mmui-table"
/// Usage: class="d-md-table mmui-table"
.mmui-table {
  // @extend .table;
  // @extend .table-responsive;
  // @extend .d-md-table;
  @extend .mmui-table-copy;

  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 6rem;

  thead {
    th {
      @extend .mmui-table-label;
      color: $mm-neutral-gray-80;
      text-transform: uppercase;
      border: none; // remove border from top of table
      vertical-align: top;

      a {
        text-decoration: none;
        color: $mm-neutral-gray-80;

        &:hover {
          color: $mm-neutral-gray-80;
        }
      }
    }
  }

  .mmui-th-metric {
    display: inline-block;
  }

  .mmui-th-levels {
    margin-left: 18px;
  }

  // to enable a header summary(total)
  //  that are apart of the sticky column header
  th.mmui-th-summary {
    padding: 0;
    z-index: 99;

    div.mmui-th-column {
      padding: 1.5rem;
    }

    div.mmui-th-summary-value {
      padding: 1.5rem;
      font-size: 1.4rem;
      line-height: 1.6rem;
      text-transform: none;
      font-weight: 600;
      letter-spacing: normal;
      color: $mm-neutral-black;
    }
  }
  .mmui-table-th-open {
    z-index: 501;
  }

  tbody {
    th,
    td {
      border-color: $mm-neutral-gray-40;
    }
    // add border for the last row
    tr:last-child {
      th,
      td {
        border-bottom: solid 1px $mm-neutral-gray-40;
      }
    }
    // for special table with empty column as seperator
    th.partition-table-cell,
    td.partition-table-cell {
      border: none;
    }

    .mmui-table-child {
      padding: 30px;

      .mmui-table-sticky thead tr:last-child {
        z-index: 499;
      }
    }
  }

  .merged-cell .row {
    padding: 0 15px 0 15px;
  }
  .col-label {
    text-align: left;
  }

  // class for supporting extra top header
  .table-top-header {
    text-align: center;
    border-bottom: 1px solid $mm-neutral-gray-80;
  }
}

table.table-sm.mmui-table {
  thead {
    font-size: 1.2rem;
    line-height: 1.5rem;
    padding: 0.6rem;

    th {
      font-size: 1.2rem;
      line-height: 1.5rem;
      padding: 0.6rem;
    }

    th.mmui-th-summary {
      padding: 0;

      div.mmui-th-column {
        padding: 0.6rem;
      }

      div.mmui-th-summary-value {
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 1rem 0.6rem;
        text-transform: none;
        font-weight: 600;
        letter-spacing: normal;
        color: $mm-neutral-black;
      }
    }
  }

  tbody th,
  td {
    font-size: 1.4rem;
    line-height: 1.6rem;
    padding: 1rem 0.6rem;
  }
}

// mmui sortable table

.mmui-table-sortable {
  thead {
    tr {
      th {
        a {
          color: $mm-neutral-gray-80;
          &:visited {
            color: $mm-neutral-gray-80;
          }
          &:hover {
            color: $mm-core-digital-blue-70;
            text-decoration: underline;
          }
        }
      }

      i.fa-caret-up {
        margin-left: 5px;
        margin-top: -3.5px;
        font-size: 16px;
      }

      i.fa-caret-down {
        margin-left: 5px;
        font-size: 16px;
      }
    }
  }
}

//The shorter max height allows the user use the bottom scroll bar without loosing site of their content.

.table-responsive {
  margin-bottom: 2rem;
  padding-bottom: 4rem;

  .mmui-table {
    margin-bottom: 0;
  }

  &.table-responsive-short {
    max-height: 600px;
  }
}

// For nested tables.
.mmui-table {
  .mmui-table{
    thead {
      // Make sure the nested table does not overlap the parent table header.
      z-index: 499 !important;
    }
  }
}

// sticky header
.mmui-table-sticky {
  .mmui-level {
    // Override the position of mmui-level elements in sticky tables.
    // This makes sure the first columns in tbody do not overlap thead elements
    position: static !important;
  }

  thead {
    position: sticky;
    top: 0;
    z-index: 500;

    & > tr:first-child > th{
      z-index: 601;
    }

    th {
      background-color: $mm-neutral-white;
      box-shadow: inset 0 -1px 0 $mm-neutral-gray-40;
    }
  }

  tbody {
    // remove boarder from top and bottom row
    tr:first-child {
      th,
      td {
        border: none;
      }
    }
  }
}

// enables sticky footer summary(total) rows
.mmui-table-summary-foot {
  padding-bottom: 0;

  tbody {
    // remove boarder from bottom row
    tr:last-child {
      th,
      td {
        border-bottom: none;
      }
    }
  }

  tfoot {
    tr {
      td {
        color: $mm-neutral-black;
        background-color: $mm-neutral-white;
        font-weight: 600;
        position: sticky;
        bottom: 0;
      }

      td::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background-color: $mm-neutral-gray-40;
      }
    }
  }
}

.mmui-table-sticky-wrapper {
  overflow-y: auto;
}
.mmui-table.mmui-difference-table {
  tbody {
    .table-cell-color-neutral {
      background-color: $mm-neutral-gray-10;
    }
    .table-cell-color-positive {
      background-color: $mm-sem-pos-20;
    }
    .table-cell-color-negative {
      background-color: $mm-sem-neg-20;
    }
    // special hover over color change
    tr:hover td {
      background-color: $mm-neutral-gray-10;
      &.partition-table-cell {
        background-color: transparent;
      }
      &.table-cell-color-neutral {
        background-color: $mm-sem-neutral-60;
      }
      &.table-cell-color-positive {
        background-color: $mm-sem-pos-50;
      }
      &.table-cell-color-negative {
        background-color: $mm-sem-neg-60;
      }
    }
  }
}
// fixed the position of the first column
.mmui-table.mmui-fixed-1st-column {

  & > thead > tr > th:first-child {
    position: sticky !important;
    background: $mm-neutral-white;
    left: 0;
  }

  & > tbody > tr:hover {
    th {
      background: $mm-neutral-gray-10;
    }
  }

  & > tbody > tr > th {
    position: sticky !important;
    background: $mm-neutral-white;
    left: 0;
  }
}

// apply the .fixed-column class to whatever cells in the column you want to fix
.mmui-table .fixed-column {
  position: sticky;
  background: $mm-neutral-white;
  left: 0;
}