// generic table
$generic-table-expand-size:     1.5rem !default;
$generic-table-expand-size-sm:  0.6rem !default;
@mixin angular-generic-table() {
  generic-table {
    table .gt-totals tr td {
      background: inherit;
      font-weight: 700;
      font-size: inherit;
      color: inherit;
    }

    table thead.gt-totals {
      border-bottom: inherit;
    }

    td.expandable-column .gt-row-content::before {
      content: '';
      display: inline-block;
      width: $font-size-base;
      height: $font-size-base;
      margin-right: $generic-table-expand-size;
      cursor: pointer;
      background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230092e1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: $font-size-base;
      background-position: center;
      transform: rotateZ(-90deg) translateX(-3px);
      transition: transform ease-in-out 300ms;
    }
    tr > td.expandable-column:hover {
      background: linear-gradient(to right, $blue 0, $blue 100%);
      background-size: ($generic-table-expand-size + $font-size-base) 100%;
      background-repeat: no-repeat;
      .gt-row-content::before {
        background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: $font-size-base;
        background-position: center;
      }
    }
    .table-sm {
      td.expandable-column .gt-row-content::before {
        margin-right: $generic-table-expand-size-sm;
      }
      tr > td.expandable-column:hover {
        background-size: ($generic-table-expand-size-sm + $font-size-base) 100%;
      }
    }
    tr > td.expandable-column .gt-row-content {
      cursor: pointer;
      white-space: nowrap;
    }

    tr.row-open > td.expandable-column .gt-row-content::before {
      transform: rotateZ(0deg) translateY(2px);
    }

    tr.row-expanded td.expandable-column .gt-row-content {
      cursor: initial;
    }

    tr.row-expanded td.expandable-column .gt-row-content::before {
      content: '';
      background: none;
    }
    tr.row-expanded td.expandable-column {
      background: none;
    }
    gt-drilldown .table {
      margin: 0;
      border-bottom: solid 1px $table-border-color;
      background-color: $gray-100 !important;
    }
  }
}