/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure 
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';

/**
 * <div class="react-tags">
 *   <div class="react-tags__selected">
 *     <button class="react-tags__selected-tag">
 *       <span class="react-tags__selected-tag-name" />
 *     </button>
 *   </div>
 *   <div class="react-tags__search">
 *     <div class="react-tags__search-input">
 *       <input />
 *       <div />
 *     </div>
 *     <div class="react-tags__suggestions">
 *       <ul>
 *         <li class="is-active">
 *           <mark />
 *         </li>
 *         <li class="is-disabled">
 *           <mark />
 *         </li>
 *       </ul>
 *     </div>
 *   </div>
 */



/* Styles for the button */
.tagInput-searchIcon {
  transform: scale(1.1);
  position: absolute;
  z-index: 200;
  fill: $color__navy-gray-7;
  float: left;
  margin: 0.6rem 0 0 0.6rem;
}

.tagInput-cleanButton {
  transform: scale(0.9);
  fill: $color__navy-gray-7;
  display: inline-block;
  float: left;
  margin: 0.6rem 0 0 -3.5rem;
  position: relative;
  z-index: 11;
  cursor: pointer;
  &:hover {
    fill: $color__navy-gray-1;
  }
}

.tagInput-infoButton {
  transform: scale(0.9);
  fill: $color__navy-gray-7;
  &:hover {
    fill: $color__blue-51;
  }
  display: inline-block;
  float: left;
  margin: 0.6rem 0 0 -2rem;
  position: relative;
  z-index: 11;
  cursor: pointer;
}

.tagInput-copyButton {
  transform: scale(0.8);
  display: inline-block;
  float: left;
  height: 2.8rem;
  width: 2.8rem;
  margin: -0.25rem 0 0 0.3rem;
  background: $color__white;
  border: 2px solid $color__blue-51;
  &:hover {
    button svg {
      fill: $color__white;
    }
    background: $color__blue-51;
  }
  button {
    margin-left: 0.4rem;
    margin-top: -0.6rem;
    svg {
      fill: $color__navy-gray-7;
    }
  }
}

.tagInput-filterButton {
  transform: scale(0.8);
  display: inline-block;
  float: left;
  height: 2.8rem;
  width: 2.8rem;
  margin: -0.25rem 0 0 -0.51rem;
  background: $color__blue-51;
  &:hover {
    button svg {
      fill: $color__navy-gray-7;
    }
    background: $color__white;
  }
  button svg {
    fill: $color__white;
  }
}

.tagInput-button {
  position: relative;
  height: 3rem;
  width: 3rem;
  border: none;
  background-color: transparent;
}

/* Styles for the combo */
.tagInput-comboBox {
  float: left;
  padding-bottom: 2.5rem;
  width: calc(100% - 2.5rem);
}

.react-tags {
  display: flex;
  position: relative;
  border-radius: 1px;
  background: $color__white;
  /* shared font styles */
  font-size: 0.75em;
  line-height: 1.2;
  padding-right: 4rem;
  /* clicking anywhere will focus the input */
  cursor: text;
  max-height: 2.25rem;
  overflow: hidden;
  z-index: 10;
  &.is-focused {
    box-shadow: 0 0 0 1px $color__blue-51;
    transition: max-height .6s ease-out;
    height: auto;
    overflow: visible;
  }
  &:hover {
    transition: max-height .6s ease-out;
    height: auto;
    overflow: visible;
  }
}


.react-tags__selected {
  display: inline;
}

.react-tags__selected-tag {
  display: inline-block;
  box-sizing: border-box;
  background: rgba(61,112,178,0.15) no-repeat right 8px center;
  color: $color__blue-90;
  padding: 0 .5rem;
  border-radius: 1.5rem;
  border-color: transparent;
  transition: all .6s ease-out;
  margin: 0.5rem -2rem 0.5rem 2.5rem;
  height: 1.25rem;

  /* match the font styles */
  font-size: 12px;
  line-height: inherit;

  :after {
    content: '\2715';
    color: $color__blue-90;
    margin-left: 8px;
  }
  :hover,
  .react-tags__selected-tag:focus {
    border-color: $color__white;
  }
}

.react-tags__keyword-tag {
  display: inline-block;
  box-sizing: border-box;
  background: $color__white;
  padding: 0.1rem .5rem;
  border-radius: 1.5rem;
  border-color: transparent;
  transition: all .6s ease-out;
  margin: 0.5rem -2rem 0.5rem 2.5rem;
  height: 1.25rem;

  /* match the font styles */
  font-size: 12px;
  font-weight: 700;
  line-height: inherit;
}

.react-tags__search {
  position: relative;
  display: flex;
  z-index: 200;
  max-width: 100%;
  margin: 0.75rem 0.5rem 0.75rem 2.5rem;
  padding-right: 2rem;

  &-input {
    display: flex;
  }
}

.react-tags__search input {
  min-height: 1rem;
  /* prevent autoresize overflowing the container */
  max-width: 100%;
  min-width: 8rem;
  /* remove styles and layout from this element */
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;

  /* match the font styles */
  font-family: 'Red Hat Text Regular';
  font-size: 0.875rem;
  font-weight: 400;
  line-height: inherit;
}

.react-tags__search input::-ms-clear {
  display: none;
}

.react-tags__search input::placeholder {
  color: $color__navy-gray-6;
}

.react-tags__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 12rem;
  z-index: 500;
  overflow: visible;
}

.react-tags__suggestions ul {
  height: 16rem;
  margin: 4px -1px;
  padding: 0;
  list-style: none;
  background: white;
  border: 1px solid #D1D1D1;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  overflow-y: scroll;
}

.react-tags__suggestions li {
  padding: .5rem;
}

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

.react-tags__suggestions li:hover {
  cursor: pointer;
  background: rgba(85,150,230,.1);
}

.react-tags__suggestions li.is-active {
  background: #b7cfe0;
}

.react-tags__suggestions li.is-disabled {
  cursor: auto;
  padding: .5rem .75rem .5rem .5rem;
  letter-spacing: .05rem;
  border-bottom: 1px solid #ddd;

  &:first-of-type {
    font-size: .6rem;
    font-weight: 700;
    color: $color__blue-51;
    text-transform: uppercase;
    position: sticky;
    top:0;
    background: white;
  }

  &:hover {
    background: white;
  }
}
