/* Container */
.ts-control {
  background: var(--pico-color-background);
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: var(--pico-border-radius, 0.25rem);
  padding: 0.5rem;
  min-height: 2.5rem;
  font-size: 1rem;
}

/* Hover */
.ts-control:hover {
  border-color: var(--pico-primary, #0d6efd);
}

/* Focus */
.ts-control.focus {
  border-color: var(--pico-primary, #0d6efd);
  box-shadow: 0 0 0 2px var(--pico-primary-focus, rgba(13,110,253,0.2));
}

/* Placeholder */
.ts-control::placeholder {
  color: var(--pico-muted-color, #666);
}

/* Tags (caso use múltiplos selects) */
.ts-control .item {
  background: var(--pico-primary);
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
}

/* Dropdown */
.ts-dropdown {
  background: var(--pico-color-background);
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: var(--pico-border-radius, 0.25rem);
  margin-top: 4px;
  box-shadow: var(--pico-card-box-shadow, 0 1px 4px rgba(0,0,0,0.1));
  overflow: hidden;
}

/* Item do dropdown */
.ts-dropdown .ts-option {
  padding: 0.5rem;
  cursor: pointer;
}

/* Hover */
.ts-dropdown .ts-option:hover {
  background: var(--pico-muted-border-color, #eee);
}

/* Selecionado */
.ts-dropdown .ts-option.selected {
  background: var(--pico-primary);
  color: white;
}

/* A seta de dropdown */
.ts-control::after {
  border-color: var(--pico-muted-color) transparent transparent;
}

@media (prefers-color-scheme: dark) {
  .ts-dropdown {
    background: var(--pico-color-background);
    border-color: var(--pico-muted-border-color);
  }

  .ts-dropdown .ts-option:hover {
    background: var(--pico-muted-border-color);
  }

  .ts-dropdown .ts-option.selected {
    background: var(--pico-primary);
    color: var(--pico-color-background);
  }
}