//
// 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/@carbon/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 {
    border-top: 0;
    width: auto;
    padding: $spacing-05;
  }

  //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;
    border: 0;
    background-color: $hover-ui;
    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 {
    overflow: hidden;
    max-height: 0;
  }

  //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-bottom: rem(23px);
    transition: padding $duration--moderate-01 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 transparent;
    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 {
    box-shadow: none; // first td doesn't have a visible border
  }

  //----------------------------------------------------------------------------
  // 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);
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
    transition: all $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 $hover-ui;
    border-bottom: 1px solid $hover-ui;
  }

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

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

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

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

  //----------------------------------------------------------------------------
  // Expand icon column
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table td.#{$prefix}--table-expand {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 3rem;
    vertical-align: top;
    padding: 0;
  }

  .#{$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: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .#{$prefix}--data-table--short .#{$prefix}--table-expand__button {
    height: auto;
  }

  .#{$prefix}--table-expand__button:focus {
    outline: 1px solid transparent;
  }

  .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
    box-shadow: inset 0px 0px 0px 1px $focus;
  }

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

  th.#{$prefix}--table-expand {
    position: relative;
    vertical-align: middle;
  }

  th.#{$prefix}--table-expand + th.#{$prefix}--table-column-checkbox {
    padding-left: $spacing-03;
  }

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

  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;
  }

  //----------------------------------------------------------------------------
  // 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 transparent;
    box-shadow: 0 1px $active-ui;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td {
    background: $selected-ui;
    color: $text-01;
    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 transparent;
    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;
    box-shadow: 0 1px $selected-ui; //no visible border when expanded
  }

  // 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-bottom: 1px solid transparent;
    box-shadow: 0 1px $active-ui;
    border-top: 1px solid $active-ui;
  }

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

  // 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;
}