/* Custom Slim-Select styling to match design system
:root {
  --ss-primary-color: var(--color-teal-600);
  --ss-border-color: var(--color-alpha-black-100);
  --ss-bg-color: var(--color-white);
}
*/

/* Style the Slim-Select container to match form fields */
.ss-main {
  @apply border-none bg-transparent text-sm opacity-100 w-full p-0 pr-3;
  @apply focus:opacity-100 focus:outline-hidden focus:ring-0;
  @apply placeholder-shown:opacity-50;
  @apply disabled:text-gray-400;
  @apply text-ellipsis overflow-hidden whitespace-nowrap;
}


/* Style the selected values */
.ss-main .ss-values .ss-value {
  /* background-color: var(--color-teal-600); */
  border-radius: theme('borderRadius.md');
  margin: 0.125rem;
}

.ss-main .ss-values .ss-value .ss-value-text {
  color: var(--color-white);
  font-size: 0.875rem;
}


.ss-content .ss-list .ss-option {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  @apply text-gray-600;
}


/* Style the list items */
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
  @apply bg-teal-100 text-gray-600;
}

.ss-content .ss-list .ss-option.ss-selected {
  @apply bg-teal-200 text-gray-600;
}

.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  @apply bg-teal-100 text-gray-600;
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  @apply bg-teal-200 text-gray-600;
}

/*
.ss-main .ss-values .ss-placeholder {
  @apply px-0 text-primary;
}
  */