pragma-list {
  @include flex();
  @include flex-column();
  width: 100%;
  background: var(--color-ui-4);

  ul {
    flex: 1;
    @include overflow-scroll(auto, touch);
    will-change: transform;
  }

  &.single {
    input[type="checkbox"] {
      display: none;
    }
    .item-container {
      padding: 0 $half-padding;
    }
  }

  li {
    display: flex;
    align-items: center;
    cursor: pointer;

  }
  li:hover {
    background: var(--color-ui-2-80);
  }

  .item-container, .group-container {
    @include flex();
    flex: 1;
    justify-content: center;
    min-height: 3rem;
  }
  .item-container {
    @include flex-column();
  }

  .group-container {
    @include flex-row();
  }
  input[type='checkbox'] {
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
  }

  .list-item-title {
    flex: 1;
    padding: 0.75rem;
    font-weight: 700;
  }
  icon-button {
    width: 3rem;
    height: 3rem;
  }
  .leaf-item {
   .item-container{
     padding: $half-padding;
   }
    &:nth-child(odd) {
      background: var(--color-ui-3-50);

      &:hover{
        background: var(--color-ui-2-80);
      }
    }
    &[aria-selected='true'] {
      color: var(--color-ui-1);
      font-weight: $font-weight-bold;
      background: var(--color-brand-light-50);

    }
    &[aria-selected='true']:hover {
      background: var(--color-brand-light-80);
    }
  }

  .grouped-item {
    background: var(--color-ui-3);
    box-shadow: 0 $default-border-width-thin/2 0 0 solid var(--color-ui-2);
  }
  .group-node-item {
    background: var(--color-ui-4);
  }
}