.reference-textctrl-autocomplete-box {
  padding: 0;
  height: auto;
  z-index: 3000;
  position: absolute;
  /* background-color: var(--jsa-ctrl-bd-input-color); */
  background-color: var(--jsa-color-excited);
  border-radius: var(--jsa-ctrl-bd-radius);
  box-shadow: var(--jsa-ctrl-shadow-active);
}

.reference-textctrl-autocomplete-box-list {
  background-color: var(--jsa-ctrl-bg-color-input);
  overflow-x: auto;
  overflow-y: auto;
  height: auto;
  padding: var(--jsa-padding);
  /*the next entries stolen from bootstrap to make it look attached to the input ctrl*/
  border: var(--jsa-ctrl-bd-input-w) var(--jsa-ctrl-bd-input-style)
    var(--jsa-ctrl-bd-input-color);
  border-radius: 0.2rem;
  /* color: #495057; */
}

.reference-textctrl-autocomplete-box-list-container {
  width: auto;
  height: auto;
  white-space: nowrap;
}

.reference-textctrl-autocomplete-box-list-container span.hl {
  background-color: var(--jsa-bg-color-success);
}

.autocomplete-box-scope-local {
  position: absolute;
  top: calc(var(--jsa-icon-w-m) / -2);
  right: calc(var(--jsa-icon-w-m) * 1.1 * 2);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-scope-local.svg);
}

.autocomplete-box-scope-local:hover {
  box-shadow: var(--bubble-hover-shadow);
  background-image: url(../img/select-list-scope-local-active.svg);
}

.autocomplete-box-scope-local-active {
  background-image: url(../img/select-list-scope-local-active.svg);
}

.autocomplete-box-scope-global {
  position: absolute;
  top: calc(var(--jsa-icon-w-m) / -2);
  right: calc(var(--jsa-icon-w-m) * 1.1 * 1);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-scope-global.svg);
}

.autocomplete-box-scope-global:hover {
  box-shadow: var(--bubble-hover-shadow);
  background-image: url(../img/select-list-scope-global-active.svg);
}

.autocomplete-box-scope-global-active {
  background-image: url(../img/select-list-scope-global-active.svg);
}

.autocomplete-box-scope-custom {
  position: absolute;
  top: calc(var(--jsa-icon-w-m) / -2);
  right: calc(var(--jsa-icon-w-m) * 1.1 * 3);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-scope-custom.svg);
}

.autocomplete-box-scope-custom:hover {
  box-shadow: var(--jsa-ctrl-hover-shadow);
  background-image: url(../img/select-list-scope-custom-active.svg);
}

.autocomplete-box-scope-custom-active {
  background-image: url(../img/select-list-scope-custom-active.svg);
}

.autocomplete-box-close {
  position: absolute;
  top: calc(var(--jsa-icon-w-m) / -2);
  right: 0;
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-close.svg);
}

.autocomplete-box-close:hover {
  box-shadow: var(--jsa-ctrl-hover-shadow);
  background-image: url(../img/select-list-close-active.svg);
}

.autocomplete-box-select-all {
  position: absolute;
  right: calc(var(--jsa-icon-w-m) / -2);
  top: calc(var(--jsa-icon-w-m) * 1.1 * 2);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-select-all.svg);
}

.autocomplete-box-select-all:hover {
  box-shadow: var(--jsa-ctrl-hover-shadow);
  background-image: url(../img/select-list-select-all-active.svg);
}

.autocomplete-box-select-none {
  position: absolute;
  right: calc(var(--jsa-icon-w-m) / -2);
  top: calc(var(--jsa-icon-w-m) * 1.1 * 3);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-select-none.svg);
}

.autocomplete-box-select-none:hover {
  box-shadow: var(--jsa-ctrl-hover-shadow);
  background-image: url(../img/select-list-select-none-active.svg);
}

.autocomplete-box-select-invert {
  position: absolute;
  right: calc(var(--jsa-icon-w-m) / -2);
  top: calc(var(--jsa-icon-w-m) * 1.1 * 4);
  border-radius: calc(var(--jsa-icon-w-m) / 2);
  width: var(--jsa-icon-w-m);
  height: var(--jsa-icon-w-m);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: url(../img/select-list-select-invert.svg);
}

.autocomplete-box-select-invert:hover {
  box-shadow: var(--jsa-ctrl-hover-shadow);
  background-image: url(../img/select-list-select-invert-active.svg);
}

.reference-textctrl-autocomplete-box-filter-textctrl {
  padding: var(--jsa-padding);
  /* margin: 0; */
}

.reference-textctrl-autocomplete-box-filter-textctrl-ctrl {
  /* padding: 0.5rem;
    margin: 0;
    width: auto;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-bottom: 1px solid black;
    border-radius: 0;
    height: 2rem;
    margin-bottom: 0; */
}

.reference-textctrl-autocomplete-box-info {
  /* font-size: 0.5rem; */
  padding: var(--jsa-padding);
  /* margin: 0;  */
}
