@image: '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8"><defs><filter id="a" width="200%" height="200%" x="-50%" y="-50%"><feMorphology in="SourceGraphic" operator="dilate" result="SvgjsFeMorphology1010Out"/><feOffset dy="1" in="SvgjsFeMorphology1010Out" result="SvgjsFeOffset1011Out"/><feGaussianBlur in="SvgjsFeOffset1011Out" result="SvgjsFeGaussianBlur1012Out"/><feComposite in="SvgjsFeGaussianBlur1012Out" in2="SourceAlpha" operator="out" result="SvgjsFeComposite1013Out"/></filter></defs><path fill-opacity=".5" d="M530 115l-5 7-5-7" filter="url(#a)" transform="translate(-520 -115)"/><path fill="#828282" d="M10 0L5 7 0 0"/></svg>';
@url_encoded: escape(@image);

// NOTE: root is body element
.root--combo-box-visible {
  height: 100%;
  overflow: hidden;
}

.combo-box {
  .appearance(none);

  position: relative;
  min-height: @input-height;
  padding-right: 35px;
  padding-left: 10px;
  text-transform: none;
  color: var(--select-color);
  border-radius: 4px;
  box-shadow: var(--combo-box-shadow);
  border: 1px solid var(--combo-box-border);
  background: var(--combo-box-background);
  font-size: @text-size-1;
  font-weight: 600;
  flex: 1 0 @input-height;
  width: 100%;
  user-select: text;
}

.combo-box__input-container--no-datalist.combo-box__input-container--with-datalist
.combo-box {
  border-radius: 4px;
}

.combo-box__input-container--with-datalist .combo-box {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.combo-box--small {
  min-height: @input-height-small;
  flex-basis: @input-height-small;
}

.combo-box:focus,
.combo-box:focus:invalid {
  border-color: @input-border-color-focus;
}

.combo-box:invalid,
.combo-box--error {
  border-color: @input-border-color-error;
}

.combo-box__trigger {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 26px;
  bottom: 1px;
  z-index: @z-index-1;
  cursor: @button-cursor;
  background: url('data:image/svg+xml;utf8,@{url_encoded}') center 15px no-repeat;
}

.combo-box__trigger--datalist-open {
  transform: rotate(180deg);
  background-position-y: 13px;
}

.combo-box__trigger--small {
  background-size: 8px auto;
  background-position-y: 10px;
}

.combo-box__trigger--datalist-open.combo-box__trigger--small {
  background-position-y: 8px;
}

.combo-box__datalist {
  position: fixed;
  z-index: @z-index-8;
  max-height: 130px;
  overflow: auto;
  background: var(--combo-box-datalist-background);
  border: 1px solid var(--combo-box-border);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.combo-box__datalist::-webkit-scrollbar {
  width: 7px;
  height: 12px;
  border-left: 1px solid transparent;
}

.combo-box__datalist::-webkit-scrollbar-corner {
  background-color: transparent;
}

.combo-box__datalist::-webkit-scrollbar-track {
  border-radius: 10px;
  background-clip: padding-box;
  background-color: transparent;
  border: 1px solid transparent;
}

.combo-box__datalist::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--gray);
  background-clip: padding-box;
  border: 1px solid transparent;
}

.combo-box__datalist--small {
  top: @input-height-small;
}

.combo-box__option {
  font-size: @text-size-1;
  font-weight: 600;
  text-shadow: none;
  padding: 5px;
  color: #b1b1b1;
  pointer-events: auto;
}

.combo-box__datalist:not(.combo-box__datalist--active-selection)
.combo-box__option:hover {
  color: #fff;
  background: rgba(46, 46, 46, 0.56);
  cursor: @button-cursor;
}

.combo-box__option--selected {
  color: #fff;
  background: var(--combo-box-option-selected-background);
}

.combo-box__option--disabled {
  pointer-events: none;
  cursor: default;
}

.combo-box__container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.combo-box__container--disabled {
  opacity: 0.7;
  pointer-events: none;
}

.combo-box__input-container {
  position: relative;
}

.combo-box__input-container--with-datalist {
  z-index: @z-index-3;
}

.combo-box__datalist-container--open {
  z-index: @z-index-8;
}

.combo-box__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: @z-index-2;
}