/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

.alt {
  display: none;
}

ul.instTree {
  padding-#{direction(left)}: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  list-style: none;
  ul {
    padding-#{direction(left)}: 0;
    margin-#{direction(left)}: 0;
  }
  li {
    list-style: none;
    min-height: 20px;
    padding-#{direction(left)}: 35px;
    position: relative;
    border-radius: 3px;
    background: direction(left) 13px top no-repeat;
    background-size: 16px 16px;
    &.separator {
      min-height: 2px;
      line-height: 2px;
      @include fontSize(12px);
    }
    &.node {
      background-image: url("/images/mimeClassIcons/folder.svg");
      &.collaborations {
        background-image: url("/images/collaboration_folder.png");
      }
      &.groups {
        background-image: url("/images/groups_folder.png");
      }
    }
    &.leaf {
      background-image: url("/images/mimeClassIcons/file.svg");
      &:hover {
        background-color: #eee;
      }
      &.active-leaf {
        background-color: #ddd;
      }
    }
    &.node {
      ul {
        display: none;
        position: relative;
        #{direction(left)}: -13px;
      }
      &.open > ul {
        display: block;
      }
    }
    span {
      cursor: default;
      -moz-user-select: none;
      &.text {
        cursor: pointer;
      }
      // &.active
      &.sign {
        display: block;
        width: 30px;
        height: 15px;
        cursor: pointer;
        position: absolute;
        #{direction(left)}: -4px;
        top: 0;
        @if $direction == 'rtl' {
          transform: scale(-1, 1);
        }
        &.plus {
          background: url("/images/inst_tree/plus.gif") 5px 50% no-repeat;
        }
        &.minus {
          background: url("/images/inst_tree/minus.gif") 5px 50% no-repeat;
        }
      }
    }
  }
  input {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    position: absolute;
    #{direction(left)}: 30px;
    top: 0;
  }
}

#instTree-drag {
  padding: direction-sides(3px 3px 3px 30px);
  z-index: 1000;
  position: absolute;
  &.node {
    // FIXME: this background image doesn't exist
    background: #C3E1FF url("/images/inst_tree/node-drag.gif") left 3px no-repeat;
  }
  &.leaf {
    background: #C3E1FF url("/images/inst_tree/leaf-drag.gif") left 3px no-repeat;
  }
}

ul.instTree {
  li.separator.dd-hover {
    background: transparent url("/images/inst_tree/separator-drag.gif") 3px 1px no-repeat;
  }
  li.leaf {
    &.dd-hover {
      background-color: yellow;
    }
    &.pdf {
      background-image: url("/images/mimeClassIcons/pdf.svg");
    }
    &.image, &.jpeg, &.jpg, &.png, &.svg {
      background-image: url("/images/mimeClassIcons/image.svg");
    }
    &.xls, &.xlsx, &.spreadsheet {
      background-image: url("/images/mimeClassIcons/xls.svg");
    }
    &.word, &.doc, &.docx {
      background-image: url("/images/mimeClassIcons/doc.svg");
    }
    &.ppt, &.pptx {
      background-image: url("/images/mimeClassIcons/ppt.svg");
    }
    &.audio {
      background-image: url("/images/mimeClassIcons/audio.svg");
    }
    &.zip {
      background-image: url("/images/mimeClassIcons/zip.svg");
    }
    &.video {
      background-image: url("/images/mimeClassIcons/video.svg");
    }
    &.html {
      background-image: url("/images/mimeClassIcons/html.svg");
    }
    &.google_docs {
      background-image: url("/images/google_docs_icon.ico");
    }
    &.etherpad {
      background-image: url("/images/etherpad_icon.ico");
    }
    &.loading {
      background-image: url("/images/ajax-loader-small.gif");
    }
  }
}
