frontend/app/assets/stylesheets/archivesspace/token-input.scss
ul.token-input-list {
  overflow: visible;
  height: auto !important;
  height: 1%;
  width: 80%;
  flex-grow: 1;
  cursor: text;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: $inputBackground;
  border: 1px solid $input-border;
  @include border-radius(4px);
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
  @include transition(border linear 0.2s, box-shadow linear 0.2s);

  // Focus state
  &:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    @include box-shadow(
      inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(82, 168, 236, 0.6)
    );
  }
}

.control-group.error ul.token-input-list {
  border-color: #ee5f5b;
}

.input-group ul.token-input-list {
  @include border-radius(4px 0 0 4px);

  height: 100%;
}

ul.token-input-list li {
  list-style-type: none;
  white-space: normal;
  position: relative;
  padding-right: 20px;
}

ul.token-input-list li input {
  border: 0;
  width: 100%;
  padding: 3px 8px;
  background-color: white;
  -webkit-appearance: caret;
}

ul.token-input-disabled,
ul.token-input-disabled li input {
  background-color: #e8e8e8;
}

ul.token-input-disabled li.token-input-token {
  background-color: #d9e3ca;
  color: #7d7d7d;
}

ul.token-input-disabled li.token-input-token span {
  color: #cfcfcf;
  cursor: default;
}

.token,
li.token-input-token {
  overflow: hidden;
  height: auto !important;
  height: 1%;
  margin: 0 4px 4px 0;
  @include gradient-y(
    $start-color: #005980,
    $end-color: #0081bd,
    $start-percent: 0%,
    $end-percent: 100%
  );

  border: 1px solid #99defd;
  padding: 2px;
  color: #fff;
  display: block;
  @include border-radius(4px);
}

li.token-input-token {
  margin: 2px;
  overflow: visible;
}

.token {
  width: fit-content;
  float: none;
  background-color: $primary;
  margin: 0 4px 4px 0;
  padding: 2px 4px;

  &.has-popover {
    cursor: pointer;
  }

  &:hover {
    @include vertical(#a4e3ff, #77d5ff);
    @include transition('linear .2s');
  }
}

.token-popover.popover {
  width: auto;
  padding: 1px;
  font-weight: normal;

  .popover-content {
    padding: 2px;
  }
}

li.token-input-token p {
  float: left;
  padding: 0;
  margin: 0;
}

li.token-input-token .token-input-delete-token {
  position: absolute;
  right: 5px;
  top: 2px;
  color: #fff;
  cursor: pointer;
}

li.token-input-selected-token {
  font-weight: bold;
}

li.token-input-selected-token span {
  color: #bbb;
}

div.token-input-dropdown {
  position: static !important;
  width: 380px;
  background-color: #fff;
  overflow: hidden;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: default;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  z-index: 1001;
}

.linker-wrapper section {
  order: 3;
}

div.token-input-dropdown p {
  margin: 0;
  padding: 5px;
  font-weight: bold;
  color: #777;
}

div.token-input-dropdown ul {
  margin: 0;
  padding: 0;
}

div.token-input-dropdown ul li {
  background-color: #fff;
  padding: 3px;
  list-style-type: none;
}

div.token-input-dropdown ul li.token-input-dropdown-item {
  background-color: #fafafa;
}

div.token-input-dropdown ul li.token-input-dropdown-item2 {
  background-color: #fff;
}

div.token-input-dropdown ul li em {
  font-weight: bold;
  font-style: normal;
}

div.token-input-dropdown ul li.token-input-selected-dropdown-item {
  background: #005980;
  color: #fff;
}

.linker-wrapper.multiplicity-many li.token-input-input-token {
  min-height: 34px;
}

.token-input-input-token > input {
  width: 100% !important;
}

.linker-list {
  max-height: 240px;

  .token-list > li {
    float: none;
    clear: both;

    label {
      overflow: hidden;
    }

    label > input {
      float: left;
      margin-right: 10px;
    }
  }

  .pagination {
    color: #666;
    background-color: #fafafa;
    padding: 4px 6px;
    border-bottom: 1px solid #eee;

    .navigation {
      float: right;
    }
  }
}

.linker-list ul {
  margin: 0;
  list-style: none;
}
.linker-list li {
  padding: 0;
}
.linker-list label {
  padding: 4px 10px 0;
}
.linker-list label:hover {
  background-color: #f1f1f1;
}
.linker-wrapper {
  width: 100%;
}
.linker-wrapper.input-group {
  .token-input-list {
    float: left;
  }
  .input-group-btn {
    float: left;
    .btn {
      @include border-radius(0 4px 4px 0);

      min-height: 36px;
    }
  }
}
.linker-wrapper.multiplicity-one {
  .token-input-list {
    min-height: 34px;
  }
}

.token-input-dropdown,
.token-input-list,
.token-list {
  .icon-token {
    @include icon;
  }

  .token-input-selected-token .icon-token {
    @include opacity(100);
  }

  .agent_person .icon-token::before {
    content: '\e008';
  }

  .agent_software .icon-token::before {
    content: '\1f527'; // ANW-1821 use wrench from bootstrap-glyphicons.css
  }

  .agent_corporate_entity .icon-token::before {
    content: '\1f4bc'; // ANW-1821 use briefcase from bootstrap-glyphicons.css
  }

  .agent_family .icon-token::before {
    @include alt-icomoon;

    content: '\e972';
  }

  .resource .icon-token::before {
    @include alt-icomoon;

    content: '\ea71';
  }

  .archival_object .icon-token::before {
    content: '\e022';
  }

  .digital_object .icon-token::before {
    content: '\e117';
  }

  .digital_object_component .icon-token::before {
    content: '\e040';
  }

  .accession .icon-token::before {
    @include alt-icomoon;

    content: '\e99f';
  }

  .subject .icon-token::before {
    content: '\e041';
  }

  // ANW-521
  // Definitions for icons for subjects, based on the term type
  .subject .subject_type_cultural_context::before {
    content: '\e060';
  }

  .subject .subject_type_function::before {
    content: '\e019';
  }

  .subject .subject_type_genre_form::before {
    content: '\e172';
  }

  .subject .subject_type_geographic::before {
    content: '\e062';
  }

  .subject .subject_type_occupation::before {
    content: '\1f4bc'; // ANW-1821 use briefcase from bootstrap-glyphicons.css
  }

  .subject .subject_type_style_period::before {
    content: '\e184';
  }

  .subject .subject_type_technique::before {
    content: '\e041'; // ANW-1821 use tag as used elsewhere in this file
  }

  .subject .subject_type_temporal::before {
    content: '\231b';
  }

  .subject .subject_type_topical::before {
    content: '\e041';
  }

  .subject .subject_type_uniform_title::before {
    content: '\e043';
  }

  .classification .icon-token::before {
    content: '\e042';
  }

  .classification_term .icon-token::before {
    content: '\e041';
  }

  .location .icon-token::before {
    content: '\e165';
  }
}

.linker-wrapper.sortable {
  .token-input-token {
    cursor: pointer;
  }

  .sortable-placeholder {
    height: $baseLineHeight;
    border: 1px dashed #ccc;
    padding: 2px;
    margin: 4px;
    @include border-radius(4px);
  }
}
.token-list {
  margin: 0;
  > li {
    list-style: none;
    margin-bottom: 4px;
    float: left;
  }
}

.linker-container {
  .record-pane table td {
    cursor: pointer;
  }
}

.prelinker {
  display: none;
}

.top_container_location .token {
  margin-left: 15px;
}
