:host {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tree-item {
  display: flex;
  align-items: center;
  height: 30px;

  .tree-item-card {
    display: flex;
    align-items: center;

    .icon {
      display: flex;
    }

    .icon-arrow {
      cursor: pointer;
      color: var(--color-gray-888);

      &.hidden {
        visibility: hidden;
      }
    }

    .item-label {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;

      color: var(--color-gray-888);

      -webkit-line-clamp: 1;

      &.parent-node {
        cursor: pointer;
        font-weight: 500;
      }
    }
  }

  .tree-item-card.drop-card {
    height: 100%;
    margin-right: 5px;
    margin-left: 16px;
    padding-right: 5px;

    background-color: var(--accent-color-bg);
    border-radius: 5px;

    .icon-drag {
      cursor: all-scroll;
      color: var(--app-bg-color-l1);
    }

    .item-label {
      color: var(--app-bg-color-l1);
    }
  }
}

.spinner-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;

  height: 100%;

  $fontSize: 16px;

  .spinner-title {
    font-size: $fontSize;
  }

  .spiner {
    width: 70%;
    margin-top: 30px;
    margin-bottom: calc(30px + $fontSize);
  }
}

.cdk-drag-placeholder {
  opacity: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}