pragma-tree {
  @include flex();
  @include flex-column();
  outline: 0;

  &.single {
    .item-container {
      input[type="checkbox"] {
        display: none;
      }
    }
  }
  [aria-expanded='true'] > div svg {
    transform: rotate(90deg);
  }
  ul {
    @include overflow-scroll(auto, touch);
    will-change: transform;

    .focus {
      background: var(--color-ui-2-80);
    }
  }

  li {
    background: var(--color-ui-3);

    &:focus {
     
    }

    &:nth-child(odd) {
      background: var(--color-ui-3-50);
    }
  }

  .item-container {
    display: flex;
    align-items: center;
    min-height: 3rem;

    div {
      padding: 0 0.75rem;
    }
    
    &:hover {
      background: var(--color-ui-2-80);
    }

    icon-button {
      width: 3rem;
      height: 3rem;

      &:hover {
        background: transparent;
      }
    }
  }

  .leaf-node {
    .item-container {
      padding-left: 1.5rem;
    }

    &[aria-selected='true'] {
      .item-container {
        color: var(--color-ui-1);
        background: var(--color-brand-light-50);
      }
    }

    &[aria-selected='true']:hover {
      .item-container {
        background: var(--color-brand-light-80);
      }
    }
  }
  
  [selectable="false"] {
    input[type="checkbox"] {
      pointer-events: none;
    }
  }
  
  input[type="checkbox"] {
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
  }
}