/**
 * React Select v5 compatibility styles
 * ===================================
 * These styles help ensure React Select v5 components look similar to the previous v1 styles
 * while allowing the built-in CSS-in-JS styling to handle most of the appearance.
 */

/* Reset some browser styles for React Select inputs */
div[class*="-control"] input::-webkit-contacts-auto-fill-button,
div[class*="-control"] input::-webkit-credentials-auto-fill-button {
  display: none !important;
}

div[class*="-control"] input::-ms-clear,
div[class*="-control"] input::-ms-reveal {
  display: none !important;
}

/* Ensure all elements use proper box sizing */
div[class*="react-select"],
div[class*="react-select"] div,
div[class*="react-select"] input,
div[class*="react-select"] span {
   box-sizing: border-box;
}

div[class*="react-select__control--is-focused"] {
   border-color: #85b7d9 !important;
   box-shadow: none !important;
}

/* Help with multi-value styling compatibility */
/*div[class*="-multiValue"] {
  background-color: rgba(0, 126, 255, 0.08);
  border-radius: 2px;
  border: 1px solid rgba(0, 126, 255, 0.24);
  color: #007eff;
  font-size: 0.9em;
  line-height: 1.4;
  margin-left: 5px;
  margin-top: 5px;
}*/

/* Animation for the loading indicator */
@keyframes react-select-loading-indicator {
  to {
    transform: rotate(1turn);
  }
}

/* Loading indicator styling */
div[class*="-loadingIndicator"] {
  animation: react-select-loading-indicator 400ms infinite linear;
}