/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018. All Rights Reserved.
 *
 * Note to U.S. Government Users Restricted Rights:
 * Use, duplication or disclosure restricted by GSA ADP Schedule
 * Contract with IBM Corp.
 *******************************************************************************/
 /* Copyright (c) 2020 Red Hat, Inc. */
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';
/* 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;
  margin: 0.6rem 0 0 -3.5rem;
  position: relative;
  z-index: 11;
  cursor: pointer;
  &:hover {
    fill: $color__gray-1;
  }
}

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

.tagInput-copyButton {
  transform: scale(0.8);
  display: inline-block;
  height: 2.8rem;
  width: 2.8rem;
  margin: -0.25rem 0 0 0.3rem;
  background: $color__white;
  border: 0.125rem 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;
  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: 0.5rem;
  width: calc(100% - 2.5rem);
  height: 4rem;
}

.react-tags {
  position: relative;
  border-radius: 0.0625rem;
  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 0.0625rem $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 0.5rem 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: 0.75rem;
  line-height: inherit;

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

.react-tags__keyword-tag {
  display: inline-block;
  box-sizing: border-box;
  background: $color__white;
  // color: $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: 0.75rem;
  font-weight: 700;
  line-height: inherit;
}

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

.react-tags__search input {
  /* 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-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

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

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

.react-tags__suggestions ul {
  margin: 0.25rem -0.0625rem;
  padding: 0;
  list-style: none;
  background: white;
  border: 0.0625rem solid #D1D1D1;
  border-radius: 0.125rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
}

.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;
  font-weight: 700;
  letter-spacing: .05rem;
  color: $color__blue-51;
  border-bottom: 0.0625rem solid #ddd;
  font-size: .6rem;
  text-transform: uppercase;

  &:hover {
    background: white;
  }
}
