@import 'variables';

/*
   override default react-select style classes.
   using !important as a temporary workaround in places where a compiled class
   is taking precendence,
*/
.amundsen__multi-value__remove:hover,
.amundsen__multi-value__remove:focus {
  background-color: $gray-light !important;
  color: $text-color !important;
}

.amundsen__control.amundsen__control--is-disabled {
  background-color: transparent;
  border-style: none;
}

.amundsen__value-container {
  padding: 0px !important;
}

.amundsen__control,
.amundsen__control--is-focused,
.amundsen__control--is-focused:hover  {
   border: none !important;
   box-shadow: none !important;
}

.amundsen__option--is-focused {
  background-color: #eee !important;
}

.amundsen__multi-value--is-disabled .amundsen__multi-value__label {
  padding-right: 6px;
}

.amundsen__indicators {
  width: 48px;
}

.tag-blob {
  display: flex;
  flex-wrap: wrap;
}

.multi-value-container {
  border-radius: 2px;
  border: 1px solid hsl(0,0%,90%);
  display: flex;
  margin: 4px;
  min-width: 0;
  box-sizing: border-box;
}

.multi-value-container.selected {
  background-color: hsl(0,0%,90%);
}

.multi-value-label {
  color: hsl(0,0%,20%);
  overflow: hidden;
  padding: 3px;
  padding-left: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  padding-right: 6px;
}

.multi-value-label:hover {
  cursor: pointer;
}

.tag-input-modal {
  .modal-body {
    height: calc(100% - 150px);
    overflow-y: scroll;
  }

  .modal-dialog,
  .modal-content {
    height: 85%;
  }

  .modal-dialog {
    overflow-y: scroll;
    width: 50% !important;

    p {
      text-align: start;
      margin-left: 4px;
    }
  }
}
