@import "../_mixins.less";

@choices: "../../../node_modules/choices.js/public/assets/styles";
@import (less) "@{choices}/choices.css";


:host {
  // TODO: remove alpha value if not necessary
  --light: rgba(0,126,255,.08);
  --light-border: rgba(0,126,255,.24);
  --light-text: #007eff;

  --solid: #1f77b4;
}

.choices {
  width: 100%
}

.choices {
  box-sizing: border-box;

  *, *:before, *:after {
    box-sizing: inherit;
  }
}

input[type="search"] {
  margin: 0;
}

.choices__inner .choices__item.light {
  background-color: var(--light);
  border-radius: var(--border-radius);
  border: var(--border-width) var(--border-style) var(--light-border);
  color: var(--light-text);
}

.choices__inner .choices__item.solid {
  background-color: var(--solid);
  border: none;
  border-radius: var(--border-radius);
  color: white;
  .is-highlighted {
    background-color: var(--solid);
    border: none;
  }
}

.choices__input {
  background-color: transparent;
}

.choices__inner {
  background: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  min-height: 0;
  padding: calc(var(--padding-vertical) / 2) var(--padding-horizontal);
}

.choices__list {
  white-space: initial;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  z-index: var(--bokeh-top-level);

  & .choices__item--selectable {
    padding-right: 0;
  }
}

.choices[data-type*=select-multiple] .choices__button.light {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDA3ZWZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
}

.choices[data-type*=select-multiple] .choices__button.solid {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  border-left: var(--divider-width) solid var(--inverted-color);
  opacity: 1;
}
