#template('colorThemeInit.vm')

/* Overwrite the styles associated with the 'full' CSS class from the XWiki skin. */
.selectize-input.full {
  min-height: 34px;
  padding: 6px 12px;
}

/* The selectize widget adds padding around the text input so we need to reduce the height of the text input. */
.selectize-input > input[type="text"] {
  height: 20px;
}

/* Styles for the loading state. */
.selectize-control.loading .selectize-input,
.selectize-control.single.loading .selectize-input.input-active {
  background-image: url("$xwiki.getSkinFile('icons/xwiki/spinner.gif')");
  background-repeat: no-repeat;
}
/*
Add enough padding to have room to display the spinning loader. That way, the selectize field do not have a brief
change of width during load.
The second 'has-items' selector is required to override the one from default bootstrap's selectize css. */
.selectize-control.multi .selectize-input,
.selectize-control.multi .selectize-input.has-items {
  padding-right: 32px;
}
.selectize-control.multi.loading .selectize-input {
  background-position: center right 12px;
}
/**
Add enough padding to have room to display the spinning loader. That way, the selectize field do not have a brief
change of width during load.
 */
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input.input-active {
  padding-right: 55px;
}
.selectize-control.single.loading .selectize-input,
.selectize-control.single.loading .selectize-input.input-active {
  background-position: center right 36px;
}

/* Dropdown styles */
/* Override width: 100% defined in selectize.bootstrap3.css, see XWIKI-19453. */
/* Override z-index so that the suggestions can be displayed in modal, see XWIKI-19870 */
.selectize-dropdown {
  width: auto;
  z-index: 10051;
}

.selectize-dropdown-left,
.selectize-dropdown-right {
  margin-top: -3px;
}
.selectize-dropdown-right {
  left: auto;
  right: 0;
}

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
  padding: 3px 20px;
}

/* Option styles */
.xwiki-selectize-option {
  white-space: nowrap;
}
.xwiki-selectize-option-icon-wrapper {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  margin-right: .3em;
  text-align: center;
  width: 18px;
}
.selectize-input .xwiki-selectize-option-icon {
  margin-right: .3em;
}
img.xwiki-selectize-option-icon {
  border-radius: 5px;
  max-height: 18px;
  max-width: 18px;
  vertical-align: text-top;
}
a.xwiki-selectize-option-label {
  color: inherit;
  text-decoration: none;
}
.xwiki-selectize-option-hint {
  color: $theme.textSecondaryColor;
  font-size: smaller;
}

/* Asynchronous Create */
.selectize-control.async-create > .selectize-input > div.xwiki-selectize-option {
  background-image: none;
  border-left: 2px solid transparent;
  border-radius: 5px;
  padding-left: 3px;
  padding-right: 3px;
}
.selectize-control.async-create > .selectize-input > div.xwiki-selectize-option.create-pending,
.selectize-control.async-create > .selectize-input > div.xwiki-selectize-option.create-running {
  border-left: 2px solid $theme.notificationSuccessColor;
}
.selectize-control.async-create > .selectize-input > div.xwiki-selectize-option.create-failed {
  background-color: #f2dede;
  border-left: 2px solid $theme.notificationErrorColor;
}
.selectize-control.is-dragover > .selectize-input {
  border: 1px dashed $theme.notificationSuccessColor;
}

/* Styles for bigger option icons */
.xwiki-selectize-option-icon-wrapper.pull-left {
  height: 36px;
  line-height: 36px;
  margin-right: .6em;
  margin-top: 2px;
  width: 36px;
}
.xwiki-selectize-option-icon-wrapper.pull-left .xwiki-selectize-option-icon {
  color: $theme.textSecondaryColor;
  font-size: 32px;
  vertical-align: middle;
}
.xwiki-selectize-option-icon-wrapper.pull-left img.xwiki-selectize-option-icon {
  max-height: 36px;
  max-width: 36px;
}

/* Live Table Filter */
.xwiki-livetable-display-header-filter .selectize-input {
  display: block;
}