.page_link_grid li {
  position: relative;
  cursor: pointer;

  .placeholder {
    display: none;
  }

  .title {
    pointer-events: none;
  }

  .edit,
  .set {
    @include icon-only-button(white);
    position: absolute;
    display: none;
    z-index: 1;
    top: 5px;
    right: 15px;
    background-color: #fff;
    border: solid 1px #888;
  }

  .edit {
    @include pencil-icon;
  }

  .set {
    @include plus-icon;
  }

  @import "pageflow/editor/file_thumbnails";

  .pictogram {
    pointer-events: none;
    background-color: #444;
    position: absolute !important;
    bottom: 0;
  }

  &.editable {
    cursor: default;

    &:hover .edit {
      display: block;
    }

    &.unassigned:hover .set {
      display: block;
    }

    &.unassigned {
      .edit {
        display: none;
      }
    }

    &.no_page {
      .placeholder {
        display: block;
      }
    }

    %highlight {
      z-index: 0;
      position: relative;
      outline: solid 1px #000;

      &:before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: solid 1px #fff;
        @include animation(blink 3s linear infinite);
        z-index: 1;
      }
    }
  }

  &.droppable %highlight {
    background-color: rgba(0, 0, 0, 0.3);

    &:before {
      background-color: rgba(255, 255, 255, 0.6);
    }
  }

  &.editable.highlighted %highlight,
  &.over %highlight {
    &:after {
      content: "";
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.6);
    }
  }

  .placeholder,
  .thumbnail {
    @extend %highlight;
  }

  &.dragged {
    .thumbnail {
      background-image: none !important;
    }

    .pictogram {
      display: none;
    }
  }
}