.data-grid, .data-list, .data-tree {
  display: block;
  .row-group {
    background: var(--color-ui-3);
  }

  .row-group:hover{
    background: var(--color-ui-2-80);
  }

  .row-body{
    background-color: var(--color-ui-4);
  }

  .card {
    border: none;
    background: transparent;
  }

  .indicator {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background: transparent;
  }

  .indicator:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px $default-border-style var(--color-brand-dark);

    position: absolute;
    will-change: transform;
    transform: translate(8px, 8px) rotate(90deg);
    transition: all 0.5s ease-out;
  }

  .row-group {
    --level: 0;

    .row-group-header {
      display: flex;
      align-items: center;
      padding-left: calc(var(--level) * 1.5rem);
    }

    .row-header-text {
      @include no-mouse();
    }
  }

  [aria-expanded="true"] > .row-group-header > .indicator{
    transform: rotate(90deg)
  }

  [aria-expanded="true"] > .body {
    display: block;
  }

  [aria-expanded="false"] > .body {
    display: none;
  }

  .row{
    color: var(--color-ui-1-80);
  }

  .row:nth-child(odd){
    background-color: var(--color-ui-3-30);
  }

  .row:nth-child(even){
    background-color: transparent;
  }

  .row[aria-selected=true], datalist.row-group[aria-selected=true]{
    background-color: var(--color-brand-light-50);
    font-weight: bold;
  }

  .row:hover{
    background-color: var(--color-ui-2-50);
    color: var(--color-ui-1);
  }

  .row[aria-selected=true]:hover, datalist.row-group[aria-selected=true]:hover{
    background-color: var(--color-brand-light-80);
  }

  .cell {
    padding: $half-padding;
    text-overflow: ellipsis;
  }

  .header {
    background-color: var(--color-ui-4);
    font-weight: bold;
  }

  .header:hover{
    background-color: var(--color-ui-3);
  }

  .header:active{
    background-color: var(--color-ui-2);
  }
}

// NOTE BM: Temporary fix until list renderer gets finalised
.data-list{
  .row-group > * {
    pointer-events: none;
  }
}

.data-list, .data-tree {
  //NOTE BM: cannot add border until renderers has been finalised.
  //border: $default-border-width-thin $default-border-style var(--color-ui-2);

  .row, row-group {
    min-height: 3rem;
  }
}

.data-tree {
  //NOTE BM: Temporary header color darker until renderers finalised
  .row-group {
    background-color: var(--color-ui-3-50);
  }
}