@import "variables";

/* Example Styles for React Tags*/
div.ReactTags__tags {
  position: relative;
}

/* Styles for the input */
div.ReactTags__tagInput {
  width: 200px;
  border-radius: 2px;
  display: inline-block;
  input.ReactTags__tagInputField {
    height: 31px;
    margin: 0;
    font-size: 12px;
    width: 100%;
    border: 1px solid $colorBorderInput;
    &:focus {
      border-color: $colorBorderFocusedInput;
    }
  }
}

/* Styles for selected tags */
div.ReactTags__selected {
  span.ReactTags__tag {
    border: 1px solid $colorBorderInput;
    background: $colorInputBackground;
    font-size: 12px;
    display: inline-block;
    padding: 5px;
    margin: 0 5px;
    cursor: move;
    border-radius: 2px;
  }
  a.ReactTags__remove {
    color: $colorFontLightGray;
    margin-left: 5px;
    cursor: pointer;
  }
}


/* Styles for suggestions */
div.ReactTags__suggestions {
  position: absolute;
  ul {
    list-style-type: none;
    box-shadow: .05em .01em .5em rgba(0, 0, 0, .2);
    background: white;
    width: 200px;
  }

  li {
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    margin: 0;
  }

  li mark {
    text-decoration: underline;
    background: none;
    font-weight: 600;
  }

  ul li.ReactTags__activeSuggestion {
    background: #b7cfe0;
    cursor: pointer;
  }
}