@import "variables";

#loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($white, 50%);

  > div {
    position: relative;
    top: 100px;
  }
}

.category-folders-search-container {
  position: relative;
  margin-left: 15px;

  img {
    position: absolute;
    top: 8px;
    right: 10px;
  }
}

#category-folders-ghost {
  position: absolute;
  z-index: 1200;
  width: 250px;
  height: 40px;
  border: 1px solid $blue-dark;
  background-color: $table-accent;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.category-folders-config {
  border-top: 1px solid $neutral-400;

  &.drag-context {

    .category,.folder {
      cursor: pointer;
    }

    .folder-children {
      .folder-children-container {
        margin-top: -2px;
      }
    }
  }

  .droppable-item {
    height: 0;
    transition: height 150ms;

    &.open-drop {
      height: 40px;
      background-color: rgba($table-accent, 50%);

      &.drop {
        background-color: $table-accent;
      }
    }
  }

  .folder-container {
    position: relative;
    z-index: 5;

    &.selected {
      z-index: 10 !important;

      > .folder {
        border-color: $blue-dark;
        background-color: $table-accent;
        z-index: 10 !important;

        .drag-handle {
          background: url('[{$dir_images}]icons/hatch-selected.gif');
        }
      }
    }

    &.open-drop {
      > .folder {
        background-color: rgba($table-accent, 50%);
      }
    }

    &.drop {
      > .folder {
        background-color: $table-accent;
      }
    }

    &.dragged-item {
      opacity: 0.5;
    }
  }

  .folder, .category {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 4px;
    border: 1px solid $neutral-400;
    margin-top: -1px;
    position: relative;
    z-index: 5;

    &.dragged-item {
      opacity: 0.5;
    }

    &.selected {
      border-color: $blue-dark !important;
      background-color: $table-accent !important;
      z-index: 10 !important;

      .drag-handle {
        background: url('[{$dir_images}]icons/hatch-selected.gif');
      }
    }

    .drag-handle {
      cursor: move;
      width: 11px;
      height: 14px;
      margin: 0 5px;
      background: url('[{$dir_images}]icons/hatch.gif');
    }

    .btn[data-action] {
      opacity: 0;
      margin: 0 5px;
    }

    > span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 10px;
    }

    &:hover {
      background: $neutral-200;

      .btn[data-action] {
        opacity: 1;
      }
    }
  }

  &.selectable {
    .category {
      padding-left: 28px;
    }

    .folder {
      cursor: pointer;

      input[type="radio"] {
        margin-left: 4px;
        margin-right: 8px;
      }
    }
  }

  .folder-children {
    border: 1px solid transparent;
    border-right-width: 0;
    border-left-color: $neutral-400;
    border-bottom-color: $neutral-400;

    .folder-children-container {
      margin: -1px 0 20px 40px;

      // The first category in a folder needs to be moved up a little.
      .category {
        &:first-of-type {
          margin-top: -2px;
        }
      }
    }
  }
}

// Popup styles.
#category-folders-popup_create-folder {
  table.contentTable tr td {
    &.key {
      width: 120px;
    }
  }
}

#category-folders-popup_select-folder {

}
