.ccl-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ccl-select-container {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm);
  background-color: var(--color-background-default, #ffffff);
  transition: border-color var(--motion-fast);
  cursor: pointer;
}

.ccl-select-container:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
}

.ccl-select-container:has(.ccl-select:disabled) {
  background-color: var(--color-background-surface);
  opacity: 0.7;
  cursor: not-allowed;
}

.ccl-select-container:has(.ccl-select[aria-invalid='true']) {
  border-color: var(--color-error-500);
}

.ccl-select {
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--color-text, #333);
  cursor: pointer;
  flex: 1;
  width: 100%;

  &:disabled {
    color: var(--color-text-disabled, #9ca3af);
    cursor: not-allowed;
  }

  &[multiple] {
    min-height: 120px;
    padding: var(--spacing-sm);
    
    option {
      padding: var(--spacing-xs) var(--spacing-sm);
      margin: var(--spacing-xs) 0;
    }
  }
}

.ccl-select__helper {
  font-size: var(--typography-font-size-sm);
  color: var(--color-success-500);
}

.ccl-select__error {
  font-size: var(--typography-font-size-sm);
  color: var(--color-error-500);
}

/* Prefix Icon (left side) */
.ccl-select__prefix-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  color: var(--color-text-secondary, #666);
  font-size: 16px;
}

.ccl-select__prefix-icon--rounded {
  background-color: var(--color-background-surface, #f5f5f5);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.ccl-select__prefix-icon--square {
  background-color: var(--color-background-surface, #f5f5f5);
  border-radius: var(--radius-xs);
  width: 32px;
  height: 32px;
}

.ccl-select__default-prefix-icon {
  font-size: 16px;
}

/* Dropdown Icon (right side) */
.ccl-select__dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  color: var(--color-text-secondary, #666);
  font-size: 16px;
}

.ccl-select__default-dropdown-icon {
  font-size: 16px;
}

/* Adjust select padding when prefix icon is present */
.ccl-select--with-prefix {
  padding-left: var(--spacing-sm);
}

/* Remove default dropdown arrow when using custom dropdown icon */
.ccl-select {
  appearance: none;
}

/* Show native dropdown arrow when no custom icon is provided */
.ccl-select-container:not(:has(.ccl-select__dropdown-icon)) .ccl-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-sm) center;
  background-size: 16px;
  padding-right: calc(var(--spacing-md) + 20px);
}

.ccl-select[multiple] {
  padding-right: var(--spacing-sm);
}

/* Focus styles for better accessibility */
.ccl-select-container:not(:has(.ccl-select__dropdown-icon)) .ccl-select:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ccl-select {
    font-size: var(--typography-font-size-sm);
    padding: var(--spacing-sm);
  }
}