@use '../../../../styles/variables' as *;

:host {
  display: block;

  .folder-tree-item {
    align-items: center;
    box-shadow: $box-shadow-border-bottom;
    display: flex;
    gap: rhythm(0.5);
    transition: background-color $transition-hint;

    &:hover {
      background-color: $color-neutral-lightest;
    }

    pa-button {
      display: flex;
      transition: transform $transition-hint;

      &.expanded {
        transform: rotate(90deg);
      }

      ::ng-deep .pa-button {
        height: rhythm(3);
        width: rhythm(3);
      }
    }
    .expander-button-placeholder {
      width: rhythm(3);
    }

    pa-checkbox {
      align-items: center;
      display: flex;
      height: rhythm(5);
      cursor: pointer;
      flex: 1 0 auto;
    }
  }

  .folder-checkbox {
    align-items: center;
    display: flex;
    gap: rhythm(1);

    pa-icon {
      display: flex;
    }
  }
  .folder-tree-children {
    padding-left: rhythm(3);
    transition:
      opacity $transition-response,
      height $transition-response;

    &.collapsed {
      height: 0 !important;
      opacity: 0;
      position: relative;
      z-index: -1;
    }
  }
}
