pragma-grid {
  display: block;
  outline: 0;

  &.single .checkbox-column {
    display: none;
  }
  .checkbox-column {
    width: 3rem;
    padding: 0;
  }
  
  [aria-expanded='true'] svg{
    transform: rotate(90deg);
  }
  
  span{
    word-break: break-word;
    pointer-events: none;
  }
  
  table {
    width: 100%;
    color: var(--color-ui-1);
    border-collapse: collapse;
  }

  thead {
    border-bottom: $default-border-width-thin/2 solid var(--color-ui-2-50);
    tr {
      background: white;
      text-transform: uppercase;
      outline: 0;
      th {
        font-size: 0.875rem;
        color: var(--color-ui-1-80);
        text-align: left;
        padding: 0 $half-padding;
        &:focus {
          outline: 0;
        }
      }
    }
  }

  tr {
    height: 3rem;
    outline: 0;
  }

  th, td {
    text-align: left;
    padding-left: $default-padding;
    &:first-child {
      padding: 0;
    }
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
  }
  th {
    color: var(--color-ui-1-80);
    font-size: var(--font-size-small);
  }
  td {
    color: var(--color-ui-1-80);
  }

  tbody {
    tr {
      font-size: var(--font-size-base);
      &:nth-child(odd) {
        background: var(--color-ui-3-50);
      }
      &:hover {
        background: var(--color-ui-2-80);
      }
      td {
        text-align: left;
        padding: 0 $half-padding;
      }
      .focus {
        background: var(--color-ui-2-80);
      }
    }
  }
  .leaf-row {
    cursor: pointer;
  }
  .leaf-row[aria-selected='true'] {
    //font-weight: $font-weight-bold;
    // TODO GM: figure out why font weight causes all children to repaint
    background: var(--color-brand-light-50);
    td {
      color: var(--color-ui-1);
    }
    &:hover {
      background: var(--color-brand-light-80);
    }
  }

  .grouped-row {
    box-shadow: inset 0 1px 0 0 #CFD2D9;

    input {
      margin-bottom: 0;
    }
    .grouped-row-container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-right: $default-padding;
      icon-button {
        width: 3rem;
        background: none;
        cursor: pointer;
      }
      .grouped-row-info {
        display: flex;
        flex: 1;
        align-items: center;
      }
    }
    .grouped-item-title {
      flex: 1;
      font-weight: bold;
    }
    .grouped-item-aggregate {
    }
    .grouped-item-template {
      width: 100%;
    }
  }
  input[type="checkbox"] {
    display: block;
    padding: 0.75rem;
    width: 3rem;
    height: 3rem;
  }
}