@import "~chosen-js/chosen.css";

// data-icon is used to tell the JS which icon class to use in a child element
// but will also add content if we don't null it out.
.chosen-single[data-icon]:before {
  content: none;
}

.chosen-container-multi .chosen-choices {
  padding: 4px 5px;
}

// Avoid chosen dropdowns overflowing when not active
// affects non-firefox #1422
.chosen-container:not(.chosen-container-active) .chosen-drop {
  overflow: hidden;
}

// Override styles from chosen's baked in css that break icon styling
.chosen-container-single .chosen-single span.chosen__icon {
  display: initial;
  margin-right: 0;
}

// We have to use focus-within here because the actual element with focus
// isn't the visible element we need to apply the styles to.
// This isn't great because it's happening regardless of whether the
// dropdown would normally be focus-visible or not, but it is better than
// nothing.
.chosen-container-active:focus-within {
  .chosen-choices,
  .chosen-single {
    // override default link offset
    --focus-outline-offset: inherit;

    outline-offset: var(--focus-outline-offset);
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    box-shadow: none;

    // Extra specificity needed here to override existing styles
    .field & {
      border-color: transparent;
    }
  }
}