.archive {

  &, ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {

    position: relative;
    padding: 7px 0 0 20px;
    min-width: 200px;

    &.archive-tree {
      > input {
        border: 1px solid #ddd;
        padding: 0 0 0 5px;
        width: 90%;
        border-radius: 3px;
        background-color: #f9f9f9;
      }
    }

    // only one
    &.archive-root {
      font-weight: bold;
      font-size: 20px;
    }

    > .archive-toggle {
      > .archive-toggle-close {
        display: none;
      }
    }

    &.archive-open {
      > .archive-toggle {
        > .archive-toggle-open {
          display: none;
        }
      }
    }

    &.drop-ready {
      > a {
        color: red;
      }
    }

    > a {
      display: inline-block;
      white-space: nowrap;
      color: #999;
      text-decoration: none;

      // 삭제 수정 버튼
      > i {
        display: none;
        margin-left: 4px;
        color: #565656;
        cursor: pointer;
        &:hover {
          color: #909090;
        }
        &:first-child {
          margin-left: 10px;
        }
      }

      &:hover {
        color: #bdbdbd;
        > i {
          display: inline-block;
        }
      }
    }

    // 선택된 폴더 스타일
    &.archive-active {
      > a, > .archive-toggle > .archive-toggle-close {
        color: #2ea02e;
        font-weight: bold;
      }
    }

    > .archive-toggle {

      position: absolute;
      top: 11px;
      left: 5px;

      cursor: pointer;

      > .archive-toggle-open {
        display: block;
        font-size: 12px;
        color: #cfcfcf;
      }

      > .archive-toggle-close {
        display: none;
        font-size: 12px;
        color: #cfcfcf;
      }

      &:hover {
        > .archive-toggle-open, > .archive-toggle-close {
          color: #444;
        }
      }
    }

    // 하위 트리
    > ul.archive {
      display: none;
    }

    // li.find-open  오픈시
    &.archive-open {
      > ul.archive {
        display: block;
      }
      > .archive-toggle {
        > .archive-toggle-open {
          display: none;
        }
        > .archive-toggle-close {
          display: block;
        }
      }
    }

    //새폴더 추가 폼
    &.archive-form {
      margin-left: -20px;
      padding-right: 15px;
      text-align: right; // 승인, 취소 버튼 우측 정렬

      > input {
        background-color: #272727;
        border: 1px solid #222222;
        color: #868686;
        outline: 0;
        border-radius: 3px;
        padding: 3px 5px;
        width: 100%;
      }

      // 승인 취소 버튼
      > span {
        cursor: pointer;
        font-size: 12px;
        &.archive-form-save {
          color: #4d9a3b;
          margin-right: 6px;
        }
        &.archive-form-cancle {
          color: #bb8523;
        }
      }
    }

    &:hover {
    }

  }
}