/* Select2 Final Overrides */
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

/* Select2 - grey border by default, primary border and box-shadow on focus */
html body .select2-container--default .select2-selection--multiple,
html body .select2-container--default .select2-selection--single {
  border-color: #dbdade !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

html body .select2-container--default.select2-container--focus .select2-selection,
html body .select2-container--default.select2-container--open .select2-selection,
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple,
html body .select2-container--default .select2-selection--single:focus,
html body .select2-container--default .select2-selection--multiple:focus,
html body .select2-container .select2-selection--single:focus,
html body .select2-container .select2-selection--multiple:focus,
html body .select2-container.select2-container--focus .select2-selection,
html body .select2-container.select2-container--open .select2-selection {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--primary-color-rgb), 0.3) !important;
  outline: 0 !important;
}

.select2-primary .select2-container--default .select2-selection,
.select2-primary .select2-selection {
  border-color: #dbdade !important;
}

/* Tagify Final Overrides */
.tagify--focus {
  border-color: var(--primary-color) !important;
}

/* Form Controls Final Overrides */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color) !important;
}

/* Switch Final Overrides */
html body .switch-primary.switch .switch-input:checked ~ .switch-toggle-slider,
html body .switch-primary .switch-input:checked ~ .switch-toggle-slider,
html body .form-switch.switch-primary .form-check-input:checked,
html body .switch.switch-primary .switch-input:checked ~ .switch-toggle-slider {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Button Primary Final Overrides */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* Dropdown Item Hover - Primary Color */
.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff !important;
  background-color: var(--primary-color) !important;
}

.dropdown-item:active {
  background-color: var(--primary-color-darker) !important;
}

/* Nav Tabs/Pills Hover Final Overrides - the compiled theme bakes in a fixed
   purple ($nav-tabs-link-active-color) for the non-active hover/focus state,
   so it needs to be pinned to the tenant primary color explicitly. */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:not(.active):focus,
.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:not(.active):focus {
  color: var(--primary-color-darker) !important;
}