@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$table-border-radius: $border-radius-md !default;
$table-row-default-height: 48px !default;
$table-row-condensed-height: 40px !default;
$table-row-expanded-height: 56px !default;
$table-row-border-bottom: solid 1px map-get($denali-grey-colors,"400") !default;
$table-row-padding: 0px 10px !default;
$table-header-text-color: map-get($denali-grey-colors,"800") !default;
$table-header-text-size: 1.2rem !default;
$table-header-text-transform: uppercase !default;
$table-header-text-weight: normal !default;
$table-header-padding: 10px !default;
$table-header-border-bottom: solid 2px map-get($denali-grey-colors,"400") !default;
$table-header-sort-text-weight: bold !default;
$table-footer-bg-color: map-get($denali-grey-colors,"400") !default;
$table-striped-row-bg-color: map-get($denali-grey-colors,"200") !default;
$table-cards-spacing: 0px 10px !default;
$table-cards-border: solid 1px map-get($denali-grey-colors,"400") !default;
$table-bg-color: map-get($denali-grey-colors,"100") !default;

@mixin table-default {
  .table-container {
    width: 100%;
    overflow: scroll;
    border-radius: $table-border-radius;

    &__freeze {
      table.table tr th:first-child {
        position: sticky;
        left: 0;
        box-shadow: $shadow-1;
        max-width: fit-content;
        background: $table-bg-color;
      }
    }
  }

  table.table {
    width: 100%;
    overflow: scroll;
    position: relative;

    th, td {
      padding: $table-row-padding;
      white-space: nowrap;

      // Alignemnt
      &.is-center {
        text-align: center;
      }
      &.is-right {
        text-align: right;
      }
    }

    tbody {
      th, td {
        border-bottom: $table-row-border-bottom;
        font-weight: normal;
      }
    }

    // Header
    thead {
      tr {
        height: 14px;
        border-bottom: $table-header-border-bottom;
      }
      th {
        text-transform: $table-header-text-transform;
        font-weight: $table-header-text-weight;
        color: $table-header-text-color;
        font-size: $table-header-text-size;
        padding: $table-header-padding;

        &.is-sorted {
          align-items: center;

          &::after {
            content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24,39.2,13.4,28.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z"/> <path d="M24,8.8,34.6,19.4a1.9,1.9,0,0,0,3-.2,2.1,2.1,0,0,0-.2-2.7L25.4,4.6a1.9,1.9,0,0,0-2.8,0l-12,11.9a2.1,2.1,0,0,0-.2,2.7,1.9,1.9,0,0,0,3,.2Z"/></svg>');
            width: 14px;
            height: 14px;
            margin-left: 4px;
            display: inline-block;
            position: relative;
            top: 2px;
          }

          &__ascend {
            font-weight: $table-header-sort-text-weight;
            &::after {
              content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path style="fill:black" d="M37.4,28.5l-12-11.9a1.9,1.9,0,0,0-2.8,0l-12,11.9A2,2,0,0,0,12,32H36a2,2,0,0,0,1.4-3.5Z"/></svg> ');
            }
          }

          &__descend {
            font-weight: $table-header-sort-text-weight;
            &::after {
              content: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M10.6,19.5l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9A2,2,0,0,0,36,16H12a2,2,0,0,0-1.4,3.5Z"/></svg> ');
            }
          }
        }
      }
    }

    // Footer
    tfoot {
      th, td {
        background: $table-footer-bg-color !important;
        &:first-child {
          border-radius: 0px 0px 0px $table-border-radius;
        }
        &:last-child {
          border-radius: 0px 0px $table-border-radius 0px;
        }
      }
    }

    // Striped Table
    &.is-striped tbody {
      th, td {
        border: none !important;
      }

      tr:nth-child(odd) {
        th, td {
          background: $table-striped-row-bg-color !important;
        }
      }
    }
    
    // Cards Table
    &.is-cards {
      border-collapse: separate;
      border-spacing: $table-cards-spacing;
      
      th, td {
        &:first-child {
          border-radius: $table-border-radius 0px 0px $table-border-radius !important;
        }
        &:last-child {
          border-radius: 0px $table-border-radius $table-border-radius 0px !important;
        }
      }

      thead th {
        padding-bottom: 0px;
        border: none;
      }
      
      tbody {
        th, td { 
          border: $table-cards-border;
          border-right: none;
          border-left: none;
          &:first-child {
            border-left: $table-cards-border;
          }
          &:last-child {
            border-right: $table-cards-border;
          }
        }
      }
    }

    // Sizes
    tr {
      height: $table-row-default-height;
    }
    &__condensed tr {
      height: $table-row-condensed-height;
    }
    &__expanded tr {
      height: $table-row-expanded-height;
    }
  }
}


@mixin table-theme {
  .table-container {
    border-radius: $table-border-radius;

    &__freeze {
      table.table tr th:first-child {
        box-shadow: $shadow-1;
        background: $table-bg-color;
      }
    }
  }

  table.table {
    th, td {
      padding: $table-row-padding;
    }
    tbody {
      th, td {
        border-bottom: $table-row-border-bottom;
      }
    }

    // Header
    thead {
      tr {
        height: 14px;
        border-bottom: $table-header-border-bottom;
      }
      th {
        text-transform: $table-header-text-transform;
        font-weight: $table-header-text-weight;
        color: $table-header-text-color;
        font-size: $table-header-text-size;
        padding: $table-header-padding;

        &.is-sorted {
          &__ascend {
            font-weight: $table-header-sort-text-weight;
          }
          &__descend {
            font-weight: $table-header-sort-text-weight;
          }
        }
      }
    }

    // Footer
    tfoot {
      th, td {
        background: $table-footer-bg-color !important;
        &:first-child {
          border-radius: 0px 0px 0px $table-border-radius;
        }
        &:last-child {
          border-radius: 0px 0px $table-border-radius 0px;
        }
      }
    }

    // Striped Table
    &.is-striped tbody {
      tr:nth-child(odd) {
        th, td {
          background: $table-striped-row-bg-color !important;
        }
      }
    }
    
    // Cards Table
    &.is-cards {
      border-spacing: $table-cards-spacing;
      th, td {
        &:first-child {
          border-radius: $table-border-radius 0px 0px $table-border-radius !important;
        }
        &:last-child {
          border-radius: 0px $table-border-radius $table-border-radius 0px !important;
        }
      }
 
      tbody {
        th, td { 
          border: $table-cards-border;
          border-right: none;
          border-left: none;
          &:first-child {
            border-left: $table-cards-border;
          }
          &:last-child {
            border-right: $table-cards-border;
          }
        }
      }
    }

    // Sizes
    tr {
      height: $table-row-default-height;
    }
    &__condensed tr {
      height: $table-row-condensed-height;
    }
    &__expanded tr {
      height: $table-row-expanded-height;
    }
  }
}