@import '../../../styles/common.module.scss';

.none {
  display: none !important;
}

.CategoryItem {
  position: relative;
  font-size: 0.85rem;
  transition: 0.3s;
}

.header {
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  background-color: transparent;
  padding: 3px 10px;
  transition: 0.3s;
}

.header:hover {
  background-color: rgba(224, 231, 255, var(--tw-bg-opacity));

  .itemActions * {
    color: rgba(67, 56, 202, var(--tw-text-opacity));
  }

  .itemActions {
    display: flex;
  }
}

:global(.modeDark) {
  .listItem {
    background-color: #333;
    border-bottom: 1px solid #333;

    * {
      color: #eee;
    }
  }

  .listItem:hover,
  .header:hover {
    background-color: #555;
  }
}

.subList {
  display: flex;
  flex-direction: column;
  margin-left: 38px;
  position: relative;
}

.subList::before {
  content: '';
  position: absolute;
  border-left: 1px solid #bbb;
  height: 100%;
  left: -9px;
  z-index: 10;
}

.expandMoreIcon {
  transition: 0.3s;
}

.headerLeft {
  display: flex;
  align-items: center;
}

.itemActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;

  a {
    display: flex;
    align-items: center;
  }
}

.treeInfo {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  justify-content: center;
  align-items: flex-end;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
