@import './spinner.css';

.custom-tree {
  width: 100%;
  font-family: Pretendard, sans-serif;
  font-size: 0.875rem;
  line-height: 150%;
  background: #fff;
  overflow-y: auto;
  outline: none;

  --animation-duration: 300ms;
  --animation-easing: ease-in-out;
}

.tree-node {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-node.drag-over.drop-after > .tree-node-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color:  #007bff;
}

.tree-node.drag-over.drop-before > .tree-node-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color:  #007bff;
}

.tree-node.drag-over.drop-inside > .tree-node-content {
    background-color: rgba(25 118 210 / 0.08);
}

.tree-node.drag-over.drop-inside > .tree-node-content.selected {
    background-color: #8fb0d4;
}

.tree-node-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  min-height: 20px;
  color: var(--color-text);
}

.tree-node-content.active {
  color: var(--color-text-primary-bold);
  font-weight: 600;
  background-color: var(--color-bg-subtle);
}

.tree-node-content.selected {
  /*background-color: rgba(25 118 210 / 0.08);*/
  /* background-color: #F7F8FA; */
}

/* 들여쓰기 */
.tree-node-indent {
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: default;
}

/* 확장/축소 버튼 */
.tree-expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
  cursor: pointer;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #666;
}

.tree-expander.empty {
  display: none;
  cursor: default;
}

.tree-expander.empty:hover {
  background-color: transparent;
}

.tree-expander.carrot {
  mask-image: url("../../img/svg/ic_cmm_fill_arrow_down.svg");
  /*mask-size: 6px 5px;  디자이너 요청으로 삭제 */
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #787982;
}

.tree-expander.expanded {
  transform: rotate(0deg);
}

.tree-expander.loading {
    mask-image: none;
    background: none;
}

/* 타이틀 */
.tree-label-container {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.tree-label {
  flex: 1;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count-container {
    font-size: 0.875rem;
    font-weight: 400;
    color: #787982;
}

.tree-node-content.active .tree-count-container {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* 자식 노드 컨테이너 */
.tree-children {
  overflow: hidden;
  height: 0;
  will-change: height;
}

.tree-children.expanding {}

.tree-children.expanded {
  height: auto;
  overflow: visible;
}

.tree-children.collapsing {}

.tree-children.collapsed {
  height: 0;
  overflow: hidden;
}

/* 에러 상태 */
.tree-node.error .tree-label {
  color: #d32f2f;
}

.tree-node.error .tree-label::after {
  content: " (Error)";
  font-size: 11px;
}

/* 비활성화 상태 */
.tree-node.unselectable .tree-node-content {
  opacity: 0.6;
  cursor: not-allowed;
}

/*아이콘 세팅 */
/* 아이콘 */
.tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--color-icon);
    mask-position: center;
    mask-repeat: no-repeat;
}

.tree-node-content.active > .tree-icon {
    background-color: var(--color-icon-primary-on-subtle);
}

.tree-icon.folder {
    width: 16px;
    height: 16px;
    mask-image: url("../../img/svg/tree-icon/ic_tree_folder-fill.svg");
    mask-size: 15px 15px;
}

.tree-icon.folder-open {
    width: 16px;
    height: 16px;
    mask-image: url("../../img/svg/tree-icon/ic_tree_folder-open.svg");
    mask-size: 15px 15px;
}

.tree-icon.file {
    mask-image: url("../../img/svg/tree-icon/ic_tree_file.svg");
    mask-size: 13px 15px;
}

.tree-icon.text-file {
    mask-image: url("../../img/svg/tree-icon/ic_tree_text-file.svg");
    mask-size: 13px 15px;
}

.tree-icon.star {
    mask-image: url("../../img/svg/tree-icon/ic_tree_star.svg");
    mask-size: 14px 14px;
}

.tree-icon.bell {
    mask-image: url("../../img/svg/tree-icon/ic_tree_bell.svg");
    mask-size: 14px 15px;
}

.tree-icon.tray {
    mask-image: url("../../img/svg/tree-icon/ic_tree_tray.svg");
    mask-size: 14px 14px;
}

.tree-icon.trash {
    mask-image: url("../../img/svg/tree-icon/ic_tree_trash.svg");
    mask-size: 14px 15px;
}

.tree-icon.prohibit {
    mask-image: url("../../img/svg/tree-icon/ic_tree_prohibit.svg");
    mask-size: 15px;
}

.tree-icon.tag-simple {
    mask-image: url("../../img/svg/tree-icon/ic_tree_tag-simple.svg");
    mask-size: 14px 10px;
}

.tree-icon.tag-simple-fill {
    mask-image: url("../../img/svg/tree-icon/ic_tree_tag-simple-fill.svg");
    mask-size: 14px 10px;
}

.tree-icon.text-clip-board {
    mask-image: url("../../img/svg/tree-icon/ic_tree_text-clip-board.svg");
    mask-size: 13px 16px;
}

.tree-icon.gear {
    mask-image: url("../../img/svg/tree-icon/ic_tree_gear.svg");
    mask-size: 16px;
}

.tree-icon.setting-fill {
    mask-image: url("../../img/svg/tree-icon/ic_tree_setting-fill.svg");
    mask-size: 16px;
}

.tree-icon.wrench-fill {
    mask-image: url("../../img/svg/tree-icon/ic_tree_wrench-fill.svg");
    mask-size: 17px;
}

.tree-icon.arrow-clock-counter {
    mask-image: url("../../img/svg/tree-icon/ic_tree_reload.svg");
    mask-size: 14px;
}

.tree-icon.arrow-clock {
    mask-image: url("../../img/svg/tree-icon/ic_tree_arrow-clock-counter.svg");
    mask-size: 14px;
}
.tree-icon.file-check-fill {
    mask-image: url("../../img/svg/tree-icon/ic_tree_check-file-fill.svg");
    mask-size: 14px 16px;
}
/* S: 메일 전용 아이콘 */
.tree-icon.archive {
    mask-image: url("../../img/svg/tree-icon/ic_tree_archive.svg");
    mask-size: 16px 11px;
}

.tree-icon.envelope {
    mask-image: url("../../img/svg/tree-icon/ic_tree_envelope.svg");
    mask-size: 15px 11px;
}

.tree-icon.paper-plane {
    mask-image: url("../../img/svg/tree-icon/ic_tree_paper-plane.svg");
    mask-size: 16px;
}

.tree-icon.clock {
    mask-image: url("../../img/svg/tree-icon/ic_tree_clock.svg");
    mask-size: 15px;
}

.tree-icon.check-shield {
    mask-image: url("../../img/svg/tree-icon/ic_tree_check-shield.svg");
    mask-size: 14px;
}
/* E: 메일 전용 아이콘*/

/* S: 주소록 전용 아이콘 */
.tree-icon.book {
    mask-image: url("../../img/svg/tree-icon/ic_tree_book.svg");
    mask-size: 12px 15px;
}

.tree-icon.organization {
    mask-image: url("../../img/svg/tree-icon/ic_tree_organization.svg");
    mask-size: 14px 15px;
}
/* E: 주소록 전용 아이콘 */

/* S: 전자결재 전용 아이콘 */
.tree-icon.hourglass {
    mask-image: url("../../img/svg/tree-icon/ic_tree_hourglass.svg");
    mask-size: 10px 15px;
}

.tree-icon.reload {
    mask-image: url("../../img/svg/tree-icon/ic_tree_reload.svg");
    mask-size: 15px 14px;
}

.tree-icon.calendar {
    mask-image: url("../../img/svg/tree-icon/ic_tree_calendar.svg");
    mask-size: 14px 15px;
}

.tree-icon.check-square {
    mask-image: url("../../img/svg/tree-icon/ic_tree_check-square.svg");
    mask-size: 14px 15px;
}

.tree-icon.x-square {
    mask-image: url("../../img/svg/tree-icon/ic_tree_x-square.svg");
    mask-size: 14px 15px;
}
/* E: 전자결재 전용 아이콘 */

/* S: 근태 전용 아이콘 */
.tree-icon.suitcase {
    mask-image: url("../../img/svg/tree-icon/ic_tree_suitcase.svg");
    mask-size: 15px 14px;
}
/* E: 근태 전용 아이콘 */

/* S: 게시판 전용 아이콘 */
.tree-icon.question {
    mask-image: url("../../img/svg/tree-icon/ic_tree_question.svg");
    mask-size: 15px;
}
/* E: 게시판 전용 아이콘 */

/* S: 동호회 전용 아이콘 */
.tree-icon.puzzle-piece {
    mask-image: url("../../img/svg/tree-icon/ic_tree_puzzle-piece.svg");
    mask-size: 16px 15px;
}

.tree-icon.out {
    mask-image: url("../../img/svg/tree-icon/ic_tree_out.svg");
    mask-size: 13px;
}
/* E: 동호회 전용 아이콘 */

/* S: 설문 전용 아이콘 */
.tree-icon.clipboard {
    mask-image: url("../../img/svg/tree-icon/ic_tree_clipboard.svg");
    mask-size: 13px 16px;
}

.tree-icon.text-clipboard {
    mask-image: url("../../img/svg/tree-icon/ic_tree_text-clip-board.svg");
    mask-size: 13px 16px;
}

.tree-icon.note-pencil {
    mask-image: url("../../img/svg/tree-icon/ic_tree_note-pen.svg");
    mask-size: 14px;
}
/* E: 설문 전용 아이콘 */

/* S: 인사평가 전용 아이콘 */
.tree-icon.trophy {
    mask-image: url("../../img/svg/tree-icon/ic_tree_trophy.svg");
    mask-size: 18px 14px;
}

.tree-icon.medal {
    mask-image: url("../../img/svg/tree-icon/ic_tree_medal.svg");
    mask-size: 13px 18px;
}

.tree-icon.employee {
    mask-image: url("../../img/svg/tree-icon/ic_tree_employee.svg");
    mask-size: 14px;
}
.tree-icon.user {
    mask-image: url("../../img/svg/tree-icon/ic_tree_user.svg");
    mask-size: 18px 14px;
}
.tree-icon.users {
    mask-image: url("../../img/svg/tree-icon/ic_tree_users.svg");
    mask-size: 18px 11px;
}
/* E: 인사평가 전용 아이콘 */

/* S: 캘린더 전용 아이콘 */
.tree-icon.gift {
    mask-image: url("../../img/svg/tree-icon/ic_tree_gift.svg");
    mask-size: 15px 14px;
}

.tree-icon.cake {
    mask-image: url("../../img/svg/tree-icon/ic_tree_cake.svg");
    mask-size: 17px 14px;
}
/* E: 캘린더 전용 아이콘 */

/* S: 마이페이지 전용 아이콘 */
.tree-icon.user-circle {
    mask-image: url("../../img/svg/tree-icon/ic_tree_user_circle-gear.svg");
    mask-size: 16px;
}

.tree-icon.square-four {
    mask-image: url("../../img/svg/tree-icon/ic_tree_square-four.svg");
    mask-size: 16px;
}

/* E: 마이페이지 전용 아이콘 */

/* S: CheckBox */
.tree-checkbox {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    overflow: hidden;
    cursor: pointer;

    --checkbox-color: var(--color-bg-primary);
    --checkbox-border-color: var(--color-border);
}

.tree-checkbox > input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  opacity: 0;
}

.tree-checkmark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: 1px solid var(--checkbox-border-color, #B2B3B9);
    border-radius: 4px;
}

.tree-checkbox > input[type="checkbox"]:checked + .tree-checkmark {
    border: none;
    background-color: var(--checkbox-color, #5C74D8);
}

.tree-checkbox > input[type="checkbox"]:checked + .tree-checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 9px 8px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 9px 8px;
    mask-image: url('../../img/svg/ic_cmm_check.svg');
    -webkit-mask-image: url('../../img/svg/ic_cmm_check.svg');
}

.tree-action-container {
    display: flex;
    align-items: center;
}

.tree-context-menu-content {
    width: auto;
    max-width: 150px;
    max-height: 300px;
    overflow: auto;
    background-color: #FFFFFF;
    border: 1px solid #8C8D96;
    border-radius: 4px;
    box-shadow: 0 4px 16px 0 #00000014, 0 8px 10px 0 #00000014;
    font-family: Pretendard, sans-serif;
}

.tree-context-menu-group {
    display: flex;
    flex-direction: column;
}

.tree-context-menu-group-title {
    padding: 6px;
    font-size: 0.75rem;
    color: #B2B3B9;
}

.tree-context-menu-group-title:not(:first-child) {
    border-top: 1px solid #E0E0E0;
}

.tree-context-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
}
.tree-context-menu-content:focus-within .tree-context-menu-item--focused {
    background-color: #5C74D81A;
    color: #1C1D24;
}

.tree-context-menu-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 400;
    color: #3F4150;
}