.tree-panel-heading-controls {
  margin: 0 0 var(--#{$cdk}size-16) 0;

  .tree-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--#{$cdk}size-4);

    .pull-right {
      order: 10;
    }
  }
}

.tree {
  padding: 0 0 0 var(--#{$cdk}size-16);
  margin: 0;
  list-style: none;

  input {
    margin: 0;
    line-height: normal;
    vertical-align: baseline;
  }

  i {
    font-size: $icon-size-base;
  }

  .tree-item-name,
  .tree-folder-name {
    display: inline-flex;
    gap: var(--#{$cdk}size-8);
    align-items: center;
    padding: var(--#{$cdk}size-2) var(--#{$cdk}size-4);
    margin: var(--#{$cdk}size-2) 0;

    &:hover {
      cursor: pointer;
      background-color: var(--#{$cdk}primary-200);
    }

    label {
      margin: 0;
    }
  }

  .tree-selected {
    background-color: var(--#{$cdk}primary-200);

    &:hover {
      background-color: var(--#{$cdk}primary-400);
    }
  }

  i.tree-dot {
    position: relative;
    display: inline-block;
    width: var(--#{$cdk}size-6);
    height: var(--#{$cdk}size-6);
    background-color: var(--#{$cdk}primary-500);
    border-radius: var(--#{$cdk}size-6);
  }

  .tree-item-disable,
  .tree-folder-name-disable {
    color: var(--#{$cdk}primary-300);

    &:hover {
      color: var(--#{$cdk}primary-300);
      background-color: none;
    }
  }
}

.tree-actions {
  display: inline-block;

  .twitter-typeahead {
    position: relative;
    top: var(--#{$cdk}size-1);
    padding: 0 0 0 var(--#{$cdk}size-4);
  }

  .tt-hint {
    // stylelint-disable-next-line
    left: var(--#{$cdk}size-4) !important;
    color: var(--#{$cdk}primary-300);
  }

  .search-field[type="text"]{
    margin: 0;
  }
}

.tree-panel-label-title {
  padding: 0 0 0 var(--#{$cdk}size-8);
  margin: 0;
  font-weight: 400;
}
