/**
 * Selectify styles specific to Gin admin theme
 */
body .dual-available,
body .dual-selected,
body .selectify-available-display,
body .selectify-selected-display {
  border-radius: var(--gin-border-m, var(--selectify-select-border-radius));
}

input.selectify-radio[type="radio"],
input.selectify-checkbox[type="checkbox"] {
  border-color: var(--selectify-checkbox-border-color, var(--gin-border-color-form-element)) !important;
  color: var(--selectify-select-color, var(--gin-color-text));
}

/* Reset Gin .form-boolean checkbox/radio pseudo-element styles
   to prevent Gin'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;
}

.wrapper-selectify > .selectify-select {
  padding: 0 !important;
  border: none !important;
}

.selectify-selected-display {
  min-block-size: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-m);
  background-color: var(--gin-bg-input);
  color: var(--selectify-select-color, var(--gin-color-text));
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  padding-block: calc(var(--input-padding-vertical) - 1px);
  padding-inline: var(--input-padding-horizontal);
}

.selectify-selected-one-option {
  color: var(--selectify-select-color, var(--gin-color-text));
  font-size: 0.875rem;
  line-height: 1;
}

body .selectify-select-dropdowns .selectify-selected-display {
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
}

.selectify-select-dropdowns .options-inner .selectify-select-footer {
  background: var(--selectify-select-bg, var(--gin-bg-input));
}

.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(--gin-border-color-form-element));
  background: var(--selectify-select-bg, var(--gin-bg-input));
  color: var(--selectify-select-color, var(--gin-color-text));
}

body .selectify-clear-all,
body .selectify-select .selectify-selected-display {
  border: 1px solid var(--selectify-select-border-color, var(--gin-border-color-form-element));
}

body .selectify-select-dropdowns .selectify-selected-display {
  min-block-size: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
  border-radius: var(--gin-border-m);
}

body.selectify-color-disabled .wrapper-selectify svg {
  fill: var(--gin-color-text) !important;
}

body.selectify-color-disabled input.selectify-radio[type="radio"],
body.selectify-color-disabled input.selectify-checkbox[type="checkbox"] {
  background: transparent !important;
}

/* Fix Selectify dropdown clipping in Field UI (Manage form display). */
:where(*) .gin-table-scroll-wrapper,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-table-scroll-wrapper {
  overflow: visible !important;
}

.selectify-radio-wrapper {
  display: flex;
  align-items: center;
  justify-content: start;
}

.selectify-radio-wrapper label {
  margin-block-end: 0;
}