//
// 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/helper-mixins';
@import '../../globals/scss/vendor/@rocketsoftware/elements/scss/import-once/import-once';
@import '../../globals/scss/vars';

/// Data table expandable styles
/// @access private
/// @group data-table
@mixin data-table-expandable {
  //----------------------------------------------------------------------------
  // Parent row
  //----------------------------------------------------------------------------
  //first row top border
  .#{$prefix}--data-table tr.#{$prefix}--parent-row:first-of-type td {
    border-top: 1px solid $ui-03;
  }

  //----------------------------------------------------------------------------
  // Child row
  //----------------------------------------------------------------------------
  // default styles
  .#{$prefix}--expandable-row--hidden td {
    width: auto;
    padding: $spacing-05;
    border-top: 0;
  }

  //child row hidden
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row] {
    height: 0;
    transition: height $duration--moderate-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    td {
    padding-top: 0;
    padding-bottom: 0;
    background-color: $hover-ui;
    border: 0;
    transition: padding $duration--moderate-01 motion(standard, productive),
      background-color $duration--moderate-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    td
    .#{$prefix}--child-row-inner-container {
    max-height: 0;
    overflow: hidden;
  }

  //child row visible
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
    transition: height $duration--moderate-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
    padding-left: $carbon--spacing-09;
    border-bottom: 1px solid $ui-03;
    transition: padding-bottom $duration--fast-02 motion(standard, productive),
      transform $duration--fast-02 motion(standard, productive),
      background-color $duration--fast-02 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    + tr[data-child-row]
    td
    .#{$prefix}--child-row-inner-container {
    max-height: 100%;
  }

  // bottom border overrides
  .#{$prefix}--parent-row.#{$prefix}--expandable-row > td,
  .#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] > td {
    border-bottom: 1px solid $ui-03;
    box-shadow: 0 1px $ui-03;
  }

  .#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    > td {
    box-shadow: none;
  }

  .#{$prefix}--parent-row.#{$prefix}--expandable-row > td:first-of-type {
    // First td doesn't have a visible border
    box-shadow: none;
  }

  //----------------------------------------------------------------------------
  // Hover styles
  //----------------------------------------------------------------------------
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
    transition: height $duration--moderate-02 motion(standard, productive),
      background-color $duration--fast-02 motion(standard, productive);
  }

  // hovering on collapsed parent
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover
    td {
    border-top: 1px solid $ui-03;
    border-bottom: 1px solid $ui-03;
  }

  // hovering on expanded parent
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td {
    color: $text-01;
    background-color: $hover-ui;
    border-top: 1px solid $ui-03;
    border-bottom: 1px solid $ui-03;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
    // First td doesn't have a visible border
    border-bottom: 1px solid $hover-ui;
  }

  // Child row when hovering on expanded parent
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
    + tr[data-child-row]
    td {
    color: $text-01;
    background-color: $hover-ui;
    border-bottom: 1px solid $ui-03;
  }

  //hovering on expanded child row
  tr.#{$prefix}--expandable-row--hover + tr[data-child-row] td {
    border-bottom: 1px solid $ui-03;
  }

  //hovering on expanded child row (class added to parent)
  tr.#{$prefix}--expandable-row--hover {
    background-color: $hover-ui;
  }

  tr.#{$prefix}--expandable-row--hover td {
    color: $text-01;
    background-color: $hover-ui;
    border-top: 1px solid $ui-03;
    border-bottom: 1px solid $ui-03;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td:first-of-type {
    // First parent td doesnt have visible bottom border
    border-bottom: 1px solid transparent;
  }

  //----------------------------------------------------------------------------
  // Expand icon column
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table td.#{$prefix}--table-expand {
    border-bottom: 1px solid $ui-03;
  }

  .#{$prefix}--data-table th.#{$prefix}--table-expand + th,
  .#{$prefix}--data-table td.#{$prefix}--table-expand + td {
    padding-left: 0;
  }

  .#{$prefix}--data-table
    th.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox,
  .#{$prefix}--data-table
    td.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox {
    padding-right: 0;
  }

  .#{$prefix}--data-table td.#{$prefix}--table-expand,
  .#{$prefix}--data-table th.#{$prefix}--table-expand {
    padding: 0;
  }

  .#{$prefix}--data-table
    td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
    border-bottom: 1px solid transparent;
  }

  .#{$prefix}--table-expand[data-previous-value='collapsed']
    .#{$prefix}--table-expand__svg {
    transform: rotate(270deg);
    transition: transform $duration--moderate-01 motion(standard, productive);
  }

  .#{$prefix}--table-expand__button {
    @include button-reset('false');

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    // Account for the border in `.bx--table-expand`
    height: calc(100% + 1px);
    vertical-align: inherit;
  }

  .#{$prefix}--table-expand__button:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px $focus;
  }

  .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
    // Windows, Firefox HCM Fix
    @media screen and (-ms-high-contrast: active),
      screen and (prefers-contrast) {
      outline: 2px solid transparent;
    }
  }

  .#{$prefix}--table-expand__svg {
    transform: rotate(90deg);
    transition: transform $duration--moderate-01 motion(standard, productive);
    fill: $ui-05;

    // Windows, Firefox HCM Fix
    @media screen and (-ms-high-contrast: active),
      screen and (prefers-contrast) {
      // `ButtonText` is a CSS2 system color to help improve colors in HCM
      fill: ButtonText;
    }
  }

  .#{$prefix}--data-table--tall .#{$prefix}--table-expand__button {
    padding-top: rem(16px);
    padding-bottom: rem(24px);
  }

  // fix expanded parent separating border length
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    td.#{$prefix}--table-expand
    + td::after {
    position: absolute;
    bottom: rem(-1px);
    left: 0;
    width: rem(8px);
    height: rem(1px);
    background: $ui-03;
    content: '';
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
    td.#{$prefix}--table-expand
    + td::after,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td.#{$prefix}--table-expand
    + td::after {
    background: $hover-ui;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected
    td.#{$prefix}--table-expand
    + td::after {
    display: none;
  }

  //----------------------------------------------------------------------------
  //ZEBRA
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td {
    border-bottom: 1px solid $ui-01;
  }

  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
    background-color: $data-table-zebra-color;
    border-top: 1px solid $data-table-zebra-color;
    border-bottom: 1px solid $data-table-zebra-color;
  }

  .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
  .#{$prefix}--data-table--zebra
    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    + tr[data-child-row]
    td {
    transition: transform $duration--moderate-01 motion(standard, productive),
      border-bottom $duration--moderate-01 motion(standard, productive),
      border-top $duration--moderate-01 motion(standard, productive);
  }

  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td,
  .#{$prefix}--data-table--zebra
    tbody
    tr[data-parent-row]:hover
    + tr[data-child-row]
    td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td {
    background-color: $hover-field;
    border-top: 1px solid $hover-field;
    border-bottom: 1px solid $hover-field;
  }

  .#{$prefix}--data-table--zebra
    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td {
    background: $hover-ui;
    border-top: 1px solid $hover-field;
    border-bottom: 1px solid $hover-field;
  }

  //----------------------------------------------------------------------------
  // Selected
  //----------------------------------------------------------------------------
  // Parent collapsed
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td {
    background: $selected-ui;
    border-top: 1px solid $active-ui;
    border-bottom: 1px solid $ui-03;
    box-shadow: 0 1px $active-ui;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td {
    color: $text-01;
    background: $selected-ui;
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px $active-ui;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td {
    background: $selected-ui;
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px $ui-03;
  }

  // Parent collapsed hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover
    td {
    background: $hover-selected-ui;
    border-top: 1px solid $hover-selected-ui;
    border-bottom: 1px solid $ui-03;
    box-shadow: 0 1px $hover-selected-ui;
  }

  // Parent expanded
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    td:first-of-type {
    border-bottom: 1px solid transparent;
    // No visible border when expanded
    box-shadow: 0 1px $selected-ui;
  }

  // Parent expanded hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    td:first-of-type,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    td:first-of-type {
    background: $hover-selected-ui;
    border-top: 1px solid $hover-selected-ui;
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px $hover-selected-ui;
  }

  // Child row expanded
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    + tr[data-child-row]
    td {
    color: $text-01;
    background-color: $hover-ui;
    border-top: 1px solid $active-ui;
    border-bottom: 1px solid $ui-03;
    box-shadow: 0 1px $active-ui;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    + tr[data-child-row]:last-of-type
    td {
    padding-bottom: rem(24px);
    box-shadow: inset 0 -1px $active-ui;
  }

  // Child row expanded hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    + tr[data-child-row]
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    + tr[data-child-row]
    td {
    background: $selected-ui;
  }
}

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