@import "../../../../scss/variables";

folders-tree {
  display: none;
  color: $drive-text-color;
  
  &.expanded {
    display: block;
  }

  .mat-tree {
    .folder-icon {
      margin-right: 5px;
      color: $icon-color-dark;
    }

    .mat-tree-node {
      padding-right: 24px;
      white-space: nowrap;

      &.disabled {
        pointer-events: none;
        opacity: 0.5;
      }

      //set hover color only when not active and not dragging over it
      &:not(.active):not(.drag-over) {
        color: inherit;
        background-color: $site-bg-color-200;

        &:hover {
          background-color: $site-bg-color-300;
        }
      }

      &.active {
        color: $site-primary-color-100;
        background-color: $site-selected-item-bg-color;

        .folder-icon {
          color: inherit;
        }

        .text {
          font-weight: 500;
        }
      }
    }

    .folder-button {
      display: flex;
      align-items: center;
      color: inherit;
      width: 100%;
      min-height: inherit;
      line-height: inherit;
    }

    .folder-icon {
      flex: 0 0 24px;
    }

    .folder-name {
      padding-top: 2.5px;
    }
  }
}