@import 'Variables';

.coveo-result-tagging-add-tag {
  display: inline-block;
  margin: 1px 2px;
}

.coveo-result-tagging-add-tag-text {
  color: #ddd;
  font-size: 11px;
}

.coveo-result-tagging-auto-complete-zone {
  display: none;
  position: relative;
}

.CoveoResult .coveo-result-tagging-coveo-tag {
  display: inline-block;
  margin: 0 2px;
  font-size: 12px;
  background-color: $color-grey;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  span {
    line-height: 14px;
    vertical-align: middle;
  }
  a {
    color: white;
  }
  a:hover {
    color: #ddd;
  }
}

.coveo-result-tagging-add-tag-tick-icon {
  display: inline-block;
  background: #b0b3ae;
  padding: 0 5px;
  line-height: 22px;
  height: 22px;
  span {
    cursor: pointer;
  }
}
.coveo-result-tagging-add-tag-tick-icon-svg {
  width: 9px;
  height: 7px;
  color: $color-white-transparent;
}

.coveo-result-tagging-clear-icon {
  display: inline-block;
  background: #b0b3ae;
  padding: 0 6px 0 5px;
  height: 22px;
  line-height: 22px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  span {
    cursor: pointer;
  }
}
.coveo-result-tagging-clear-icon-svg {
  width: 8px;
  height: 8px;
  .coveo-exclusion-svg {
    fill: $color-white-transparent;
  }
}

.coveo-result-tagging-add-tag-textbox {
  margin: 0;
  border: 1px solid #b0b3ae;
  background: transparent;
  padding: 3px;
  z-index: 10;
  font-size: 10px;
  position: relative;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  outline: none;
}

.coveo-result-tagging-add-tag-textbox:focus {
  border-color: #9ecaed;
  box-shadow: inset 0 0 3px #9ecaed;
}

.coveo-result-tagging-tag-zone {
  display: inline-block;
}

.coveo-result-tagging-delete-icon {
  cursor: pointer;
  margin-left: 2px;
}
.coveo-result-tagging-delete-icon-svg {
  width: 8px;
  height: 8px;
  .coveo-exclusion-svg {
    fill: $color-white-transparent;
  }
}

.coveo-result-tagging-auto-complete {
  position: absolute;
  padding-top: 1px;
  top: 18px;
  left: 0;
  background-color: white;
  border-left: 1px solid #b0b3ae;
  border-bottom: 1px solid #b0b3ae;
  border-right: 1px solid #b0b3ae;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  z-index: 5;
  .coveo-selectable {
    padding: 5px 10px 5px 16px;
    background-color: white;
    font-size: 10px;
    cursor: pointer;
  }
  .coveo-selected,
  .coveo-selectable:hover {
    background-color: #d7ebff;
  }
}

.CoveoResultTagging {
  margin: 0 3px;
  font-size: 12px;
  * {
    vertical-align: middle;
  }
}

.CoveoResultTagging {
  display: inline-block;
  &.coveo-opened {
    .coveo-result-tagging-add-tag {
      display: none;
    }
    .coveo-result-tagging-auto-complete-zone {
      display: inline-block;
      .coveo-add-tag-textbox {
        font-size: 11px;
        line-height: 16px;
      }
    }
    .coveo-result-tagging-coveo-tag {
      background-color: $color-greyish-teal-blue;
    }
  }
  .CoveoResultTagging.coveo-error {
    input {
      border-color: #c33;
    }
  }
}
