.sds-tree-table--scrollable {
    overflow: scroll;
  
    .sds-tree-table {
      width: 59.25rem;
    }
  }
  
  table.sds-tree-table {
    border-collapse:separate; 
    border-spacing: 0 5px;
  
    thead {
      th {
        border: none;
        @include u-padding(2);
        @include u-bg('accent-cool-lighter');
      }
      
      @include u-border('accent-cool-light');  
    }
    
    tbody {
    
      td {
        border-style: none;
        position: relative;
        .horizontal-border {
          border-top: 3px dashed;
          height: 1px;
          position: absolute;
          width: 100%;
          top: 50%;
          color: color('ink');
        }
    
        .vertical-border {
          border-left: 3px dashed;
          width: 1px;
          height: 100%;
          position: absolute;
          bottom: 40px;
          color: color('ink');
        }
      }
      
      tr:not(.text-center) {
    
        td:first-child {
          position: relative;
          .usa-button {
            cursor: pointer;
            top: 0.25rem;
            color: color('accent-cool');
            svg {
              background-color: color('ink');
              border-radius: 50%;
            }
          }
  
          .usa-button:hover {
            filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
          }
        }
    
        td:nth-child(2) {
          border-left: 1px solid color('base-light');
        }
      
        td:not(:first-child) {
          border-top: 1px solid color('base-light');
          border-bottom: 1px solid color('base-light');
        }
      
        td:last-child {
          border-right: 1px solid color('base-light');
        }
      }
    
      tr[aria-expanded] {
        td {
          background-color: color('base-lightest');
        }
    
        td:first-child {
          background-color: unset;
        }
      }
    
  
      tr[aria-level="1"] {
        .vertical-border {
          margin-left: 1rem;
          margin-top: 1rem;
        }
  
        .horizontal-border {
          margin-left: 2rem;
        }
      }
    }
    
    
    .sds-tree-table__row--selected:not(.text-center) {
      td:nth-child(2) {
        @include u-border-left('secondary');
      }
    
      td:not(:first-child) {
        @include u-border-top('secondary');
        @include u-border-bottom('secondary');
      }
    
      td:last-child {
        @include u-border-right('secondary');
      }
    }
  
    .sds-tree-table__row--highlight-border > td {
      .vertical-border-top {
        border-color: color('secondary');
      }
  
      .vertical-border {
        border-color: color('secondary');
      }
  
      .horizontal-border {
        border-color: color('secondary');
      }
    }
  
  
   // CSS for up to 10 nested children
    @for $i from 1 through 10 {
      tr[aria-level="#{$i}"] {
        td:nth-child(2), .usa-button {
          position: relative;
          left: #{($i * 1.5) - 1.5}rem;
        }
  
        td:nth-child(2) {
          padding-right: #{($i * 1.5) - 1.5}rem;
        }
  
        .vertical-border, .horizontal-border {
          margin-left: #{($i * 1.5) - 2}rem;
        }
      }
  
    }
  }