$choices-selector: 'choices' !default;
$choices-font-size-lg: 20px !default;
$choices-font-size-md: 17px !default;
$choices-font-size-sm: 14px !default;
$choices-guttering: 20px !default;
$choices-border-radius: radius(1) !default;
$choices-border-radius-item: radius(1) !default;
$choices-bg-color: color(grey-1) !default;
$choices-bg-color-disabled: color(grey-4) !default;
$choices-bg-color-dropdown: color(white) !default;
$choices-text-color: color(slate) !default;
$choices-keyline-color: color(bright-blue) !default;
$choices-primary-color: color(bright-blue) !default;
$choices-disabled-color: $light-slate !default;
$choices-highlight-color: $choices-primary-color !default;
$choices-button-dimension: spacer(1) !default;
$choices-button-offset: spacer(1) !default;
$choices-icon-cross: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==) !default;
$choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==) !default;
$choices-z-index: 1;

@import "choices.js/src/styles/choices";

$select-border-width: 2px;

.#{$choices-selector}[data-type*="select-multiple"] .choices__button {
  padding: 5px 20px;
  vertical-align: middle;
}

.formio-choices {
  .ui {
    border: $select-border-width solid $slate;
    border-radius: radius(1);
    padding: spacer(1);
  }

  .ui:focus,
  &[aria-expanded=true] .ui {
    border-color: color(bright-blue);
  }

  &.is-open .ui {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  .#{$choices-selector}__list--single {
    padding: 0;
  }

  .#{$choices-selector}__input {
    background-color: transparent;
    box-shadow: none !important;
  }

  .#{$choices-selector}__list--dropdown {
    border-width: $select-border-width;
    border-radius: 0 0 radius(1) radius(1);
    // These were breaking the multiselect version of the choices
    // input and probably need to be more precisely targeted.
    // top: 0;
    // margin-top: 0;

    .#{$choices-selector}__input {
      border-bottom-width: $select-border-width;
      box-shadow: none !important;
    }
  }

  .#{$choices-selector}__item {
    &.has-no-choices {
      color: $light-slate;
    }
  }
}