/* Dropdown */
.ts-dropdown {
  background-color: var(--color-background) !important;
  border: 2px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  font-weight: 400 !important;
}

/* Dropdown options */
.ts-dropdown .option {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 400 !important;
  padding: 0.5rem 0.75rem !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: rgba(202, 236, 255, 0.1) !important;
  color: var(--color-neon-blue) !important;
}

/* Input field */
.ts-control {
  background-color: var(--color-background) !important;
  border: 2px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  font-weight: 400 !important;
  min-height: 2.5rem !important;
  padding: 0.25rem !important;
}

.ts-control input {
  color: var(--color-text-primary) !important;
  font-weight: 400 !important;
}

/* Selected items (chips) */
.ts-control .item {
  background-color: rgba(202, 236, 255, 0.2) !important;
  border: 1px solid var(--color-neon-blue) !important;
  color: var(--color-neon-blue) !important;
  font-weight: 400 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.375rem !important;
}

/* Remove button in chips */
.ts-control .item .remove {
  color: var(--color-neon-blue) !important;
  margin-left: 0.25rem !important;
  padding-left: 0.25rem !important;
  border: none;
}

.ts-control .item .remove:hover {
  color: var(--color-neon-pink) !important;
  background-color: transparent !important;
}

/* Placeholder */
.ts-control input::placeholder {
  color: var(--color-text-muted) !important;
  font-weight: 300 !important;
}

/* Focus state */
.ts-control.focus {
  border-color: var(--color-neon-blue) !important;
  box-shadow: 0 0 0 1px var(--color-neon-blue) !important;
}

/* Dropdown wrapper positioning */
.ts-wrapper {
  width: 100% !important;
}

[data-dropdown-target="menu"]:not(.hidden) ~ button svg,
button:has(+ [data-dropdown-target="menu"]:not(.hidden)) svg {
  stroke: #caecff; /* neon-blue color */
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}