@import 'tao/ui/globals'; @import 'tao/ui/shared/tables';

table.table {

tbody tr:hover {
  background-color: $table-row-hover-color;
}

}

.tao-table {

.table {
  table-layout: fixed;
}

.th-checkbox,
.td-checkbox {
  display: none;
  width: 2.5rem;
  padding: 0;
  text-align: center;
}

&[selectable] {
  .th-checkbox,
  .td-checkbox {
    display: table-cell;
  }
}

.th-expand-icon,
.td-expand-icon {
  display: none;
  width: 2.5rem;
  padding: 0;
  text-align: center;
}

&[expandable] {

  .th-expand-icon,
  .td-expand-icon {
    display: table-cell;

    .icon {
      width: 1rem;
      height: 1rem;
      transition: transform 200ms;
    }
  }

  tr.expandable {
    .td-expand-icon .icon {
      fill: $lighter-grey-color;
    }

    &:hover .td-expand-icon .icon {
      fill: $grey-color;
    }
  }

  tr.expanded {
    border-bottom-color: transparent;

    .th-expand-icon,
    .td-expand-icon {
      .icon {
        transform: rotate(90deg);
      }
    }
  }

  tr.expandable-panel {
    display: none;
    background: $grey-bg-color;

    & > td  {
      padding: 0;
      box-shadow: inset 0 8px 10px -8px rgba(184, 184, 184, 0.8);

      & > div:first-child {
        padding: 1.5rem 2rem;
        height: 0;
        transition: height 200ms linear;
        overflow-y: hidden;
      }
    }
  }
}

}