/**
 * Selectify styles for Claro admin theme
 */

/* Claro theme adjustments */
.wrapper-selectify {
  border: none;
  border-radius: var(--details-border-size-radius);
  color: var(--olivero-text);
}

.wrapper-selectify > * {
  background-color: transparent;
}

.field--widget-selectify-dual .wrapper-selectify {
  inline-size: 100%;
}

.field--widget-selectify-dual .selectify-select-dual-list {
  inline-size: auto;
}

body .dual-available,
body .dual-selected,
body .selectify-available-display,
body .selectify-selected-display {
  border-radius: var(--input-border-radius-size, var(--selectify-select-border-radius));
}

.dual-available,
.dual-selected,
.selectify-available-display,
.selectify-selected-display,
.selectify-select-dropdowns .options-inner .selectify-select-footer {
  border-color: var(--selectify-select-border-color, var(--input-border-color));
  background: var(--selectify-select-bg, var(--color-gray-050));
  color: var(--selectify-select-color, var(--input-fg-color));
}

.views-exposed-form label+.wrapper-selectify {
  margin-inline-end: 0 !important;
}

input.selectify-radio[type="radio"]:focus,
input.selectify-checkbox[type="select"]:focus,
input.selectify-checkbox[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
}

input.selectify-radio[type="radio"],
input.selectify-checkbox[type="checkbox"] {
  border-color: var(--selectify-select-border-color, var(--input-border-color));
  color: var(--selectify-select-color, var(--input-fg-color));
}

.selectify-select-dropdowns .selectify-selected-one-option {
  border: 1px solid var(--selectify-select-border-color, var(--input-border-color));
}

/* Reset Claro .form-boolean checkbox/radio pseudo-element styles
   to prevent Claro's positioning and mask-image from overriding
   Selectify toggle circle and checkmark icon */
input.selectify-checkbox.form-boolean[type="checkbox"]::before,
input.selectify-radio.form-boolean[type="radio"]::before {
  clip-path: none !important;
  mask-image: none !important;
  inset-block: 0 auto !important;
  inset-inline: 0 auto !important;
}

input.selectify-checkbox.form-boolean[type="checkbox"]::after,
input.selectify-radio.form-boolean[type="radio"]::after {
  clip-path: none !important;
  mask-image: none !important;
}

.selectify-select-dropdowns .selectify-selected-display {
  max-inline-size: 100%;
  block-size: var(--sp3);
  min-block-size: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height));
  padding-block: var(--input-padding-vertical);
  padding-inline: var(--input-padding-horizontal);
  border: var(--input-border-size) solid var(--input-border-color);
  border-radius: var(--input-border-radius-size);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  appearance: none;
}

.selectify-clear-all:hover,
.selectify-selected-one-option.dual-item:hover,
.selectify-available-one-option:hover,
.selectify-selected-display:hover {
  border-color: var(--selectify-select-focus-border-color, var(--input--hover-border-color), var(--gin-color-text));
}