//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import 'mixins';

/// Data table core styles
/// @access private
/// @group data-table
@mixin data-table-core {
  //----------------------------------------------------------------------------
  // Container
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-container {
    min-width: rem(500px);
    overflow-x: auto;
    padding-top: $spacing-01; // allow space for focus styles
  }

  //----------------------------------------------------------------------------
  // Table title text
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-header {
    background: $ui-01;
    padding: $spacing-05 0 $spacing-06 $spacing-05;
  }

  .#{$prefix}--data-table-header__title {
    @include type-style('productive-heading-03');
    color: $text-01;
  }

  .#{$prefix}--data-table-header__description {
    @include type-style('body-short-01');
    color: $text-02;
  }

  //----------------------------------------------------------------------------
  // Data table
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  .#{$prefix}--data-table thead {
    @include type-style('heading-01');
    background-color: $ui-03;
  }

  .#{$prefix}--data-table tbody {
    @include type-style('body-short-01');
    background-color: $ui-01;
    width: 100%;
  }

  .#{$prefix}--data-table tr {
    border: none;
    height: $layout-04;
    width: 100%;
  }

  .#{$prefix}--data-table tbody tr,
  .#{$prefix}--data-table tbody tr td,
  .#{$prefix}--data-table tbody tr th {
    transition: background-color $duration--fast-01 motion(entrance, productive);
  }

  .#{$prefix}--data-table tbody tr:hover {
    background: $hover-field;
  }

  .#{$prefix}--data-table tbody tr:hover td,
  .#{$prefix}--data-table tbody tr:hover th {
    color: $text-01;
    background: $hover-field;
    border-bottom: 1px solid $hover-field;
    border-top: 1px solid $hover-field;
  }

  .#{$prefix}--data-table th,
  .#{$prefix}--data-table td {
    padding-left: $spacing-04;
    padding-right: $spacing-04;
    vertical-align: top;
    text-align: left;
  }

  .#{$prefix}--data-table th {
    color: $text-01;
    background-color: $ui-03;
  }

  .#{$prefix}--data-table th:first-of-type:not(.#{$prefix}--table-expand) {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table th:last-of-type {
    position: relative;
    width: auto;
  }

  .#{$prefix}--data-table .#{$prefix}--table-header-label {
    display: block;
    padding: rem(14px) 0;
    text-align: left;
  }

  .#{$prefix}--data-table td,
  .#{$prefix}--data-table tbody th {
    background: $ui-01;
    color: $text-02;
    border-top: 1px solid $ui-01;
    border-bottom: 1px solid $ui-03;
    padding: rem(14px) $spacing-04;
    padding-bottom: rem(13px);

    & + td:first-of-type {
      padding-left: $spacing-04;
    }
  }

  @supports (-moz-appearance: none) {
    .#{$prefix}--data-table td {
      background-clip: padding-box; // fix to show borders in ff
    }
  }

  .#{$prefix}--data-table td:first-of-type {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table td:last-of-type {
    padding-right: $spacing-05;
  }

  // specific padding/width for overflow menu columns
  .#{$prefix}--data-table .#{$prefix}--table-column-menu,
  .#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
    width: rem(52px);
    min-width: rem(52px);
    padding-top: $spacing-03;
    padding-right: $spacing-03;
  }

  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
    padding-bottom: 0;
  }

  .#{$prefix}--data-table
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
    background: $ui-03;
  }

  // Overflow Menu Overrides
  .#{$prefix}--data-table
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
    @include focus-outline('outline');
  }

  .#{$prefix}--data-table
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
    outline: none;
  }

  @media screen and (hover: hover),
    (-ms-high-contrast: active),
    (-ms-high-contrast: none) {
    .#{$prefix}--data-table
      td.#{$prefix}--table-column-menu
      .#{$prefix}--overflow-menu
      .#{$prefix}--overflow-menu__icon {
      opacity: 0;
    }
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--visible-overflow-menu
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu
    .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--data-table
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu:hover
    .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--data-table
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu:focus
    .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--data-table
    tr:hover
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu
    .#{$prefix}--overflow-menu__icon {
    opacity: 1;
  }

  .#{$prefix}--table-row--menu-option
    .#{$prefix}--overflow-menu-options__btn
    .#{$prefix}--overflow-menu-options__option-content
    svg {
    margin-right: $spacing-03;
    position: relative;
    top: rem(
      3px
    ); //used to center svg without setting display flex //display block needed for overflow text truncation
  }

  //----------------------------------------------------------------------------
  //ZEBRA
  //----------------------------------------------------------------------------

  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
    border-bottom: 1px solid $ui-01;
  }

  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
    background-color: $data-table-zebra-color;
    border-bottom: 1px solid $data-table-zebra-color;
    border-top: 1px solid $data-table-zebra-color;
  }

  .#{$prefix}--data-table--zebra tbody tr:hover td {
    background-color: $hover-field;
    border-bottom: 1px solid $hover-field;
    border-top: 1px solid $hover-field;
  }

  //----------------------------------------------------------------------------
  // Select
  //----------------------------------------------------------------------------
  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
    position: relative;
    background: $ui-03;
    padding: rem(12px) $spacing-03 0 $spacing-05;
    width: rem(
      44px
    ); // 16px padding left + 8px padding right + 20px checkbox width
    transition: background-color $duration--fast-01 motion(entrance, productive);
  }

  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
    padding-top: rem(11px);
    padding-bottom: 0;
  }

  th.#{$prefix}--table-column-checkbox:hover {
    background: $data-table-column-hover;
  }

  // default selected row + zebra select - even child
  .#{$prefix}--data-table--zebra
    tbody
    tr:nth-child(odd).#{$prefix}--data-table--selected
    td,
  tr.#{$prefix}--data-table--selected td {
    color: $text-01;
    background-color: $selected-ui;
    border-top: 1px solid $selected-ui;
    border-bottom: 1px solid $active-ui; //bottom border acts as separator from other rows
  }

  // first row
  .#{$prefix}--data-table--zebra
    tbody
    tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected
    td,
  tr.#{$prefix}--data-table--selected:first-of-type td {
    border-top: 1px solid $active-ui; //top border acts as separator from thead
  }

  // last row + zebra select last
  .#{$prefix}--data-table--zebra
    tbody
    tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected
    td,
  .#{$prefix}--data-table--zebra
    tbody
    tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected
    td,
  tr.#{$prefix}--data-table--selected:last-of-type td {
    border-top: 1px solid $selected-ui; // doesn't need separators
    border-bottom: 1px solid $selected-ui;
  }

  // zebra select - odd child
  .#{$prefix}--data-table--zebra
    tbody
    tr:nth-child(even).#{$prefix}--data-table--selected
    td {
    border-bottom: 1px solid $active-ui;
  }

  .#{$prefix}--data-table--zebra
    tbody
    tr:nth-child(even).#{$prefix}--data-table--selected:hover
    td {
    border-bottom: 1px solid $data-table-column-hover;
  }

  // hover + zebra select - even child
  .#{$prefix}--data-table--zebra
    tbody
    tr:nth-child(odd).#{$prefix}--data-table--selected:hover
    td,
  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
    color: $text-01;
    background: $data-table-column-hover;
    border-top: 1px solid $data-table-column-hover;
    border-bottom: 1px solid $data-table-column-hover;
  }

  // selected overflow menu
  .#{$prefix}--data-table--selected
    .#{$prefix}--overflow-menu
    .#{$prefix}--overflow-menu__icon {
    opacity: 1;
  }

  //----------------------------------------------------------------------------
  // Compact
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--compact thead tr,
  .#{$prefix}--data-table--compact tbody tr {
    height: rem(24px);
  }

  .#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
    padding: rem(2px) 0;
  }

  .#{$prefix}--data-table--compact td {
    padding-top: rem(2px);
    padding-bottom: rem(2px);
  }

  .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
    width: rem(32px);
    height: rem(23px); //24px row - 1px border
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--compact
    .#{$prefix}--table-column-menu {
    padding-top: 0;
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--compact
    .#{$prefix}--table-column-checkbox {
    padding-top: 0;
    padding-bottom: 0;
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--compact
    .#{$prefix}--table-column-checkbox
    .#{$prefix}--checkbox-label {
    min-height: rem(23px); //24px row - 1px border
    height: rem(23px);
  }

  //----------------------------------------------------------------------------
  // Short
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--short thead tr,
  .#{$prefix}--data-table--short tbody tr {
    height: rem(32px);
  }

  .#{$prefix}--data-table--short .#{$prefix}--table-header-label {
    padding: rem(7px) 0;
  }

  .#{$prefix}--data-table--short td {
    padding-top: rem(7px);
    padding-bottom: rem(6px);
  }

  .#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
    height: rem(31px); //32px row - 1px border
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--short
    .#{$prefix}--table-column-menu {
    padding-top: 0;
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--short
    .#{$prefix}--table-column-checkbox {
    padding-top: rem(3px);
    padding-bottom: rem(3px);
  }

  //----------------------------------------------------------------------------
  // Tall
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--tall thead tr,
  .#{$prefix}--data-table--tall tbody tr {
    height: rem(64px);
  }

  .#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
    padding: rem(16px) 0;
  }

  .#{$prefix}--data-table--tall td {
    padding-top: 1rem;
  }

  .#{$prefix}--data-table--cell-secondary-text {
    @include type-style('label-01');
  }

  .#{$prefix}--data-table.#{$prefix}--data-table--tall
    .#{$prefix}--table-column-menu,
  .#{$prefix}--data-table.#{$prefix}--data-table--tall
    .#{$prefix}--table-column-checkbox {
    padding-top: rem(12px);
  }

  //----------------------------------------------------------------------------
  // Static
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--static {
    width: auto;
  }

  // -------------
  // Sticky header
  // -------------
  .#{$prefix}--data-table_inner-container {
    background-color: $ui-03;
    padding-top: rem(48px);
    transform: translateZ(0);
  }

  .#{$prefix}--data-table--sticky-header {
    display: block;
    // max-height: rem(300px);
    overflow-y: scroll;

    thead,
    tbody,
    tr,
    th,
    td {
      display: flex;
    }

    thead {
      position: fixed;
      top: 0;
      width: 100%;
      overflow: scroll;
      -ms-overflow-style: none; //hides ie scrollbar
      will-change: transform;
    }

    thead tr th {
      border-bottom: 1px solid $active-ui;
    }

    tbody {
      flex-direction: column;
      overflow-x: scroll;
      -ms-overflow-style: none; //hides ie scrollbar
      will-change: transform;
    }

    tr {
      min-height: rem(48px);
      height: auto;
    }

    tr.#{$prefix}--data-table--selected:first-of-type td {
      border-top: none;
    }

    //hides webkit scrollbar
    thead::-webkit-scrollbar,
    tbody::-webkit-scrollbar {
      display: none;
    }

    //hides ff scrollbar
    @-moz-document url-prefix() {
      thead,
      tbody {
        scrollbar-width: none;
      }
    }

    tbody tr:last-of-type {
      border-bottom: 0;
    }

    th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand-v2):not(.#{$prefix}--table-column-icon),
    td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand-v2):not(.#{$prefix}--table-column-icon) {
      width: 100%;
      min-width: 0;
    }

    .#{$prefix}--table-header-label {
      max-width: calc(100% - 10px);
      @include text-overflow;
    }
  }

  @include sticky-header($max-width: rem(900px));
}

@include exports('data-table-v2-core') {
  @include data-table-core;
}