/**
 * MultiSelectDropdown Component Styles
 * 主题感知的多选下拉组件样式
 * 依赖: theme.css
 */

.ms-panel,
.ms-embedded {
  background: var(--inner-surface-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.ms-toolbar {
  flex-wrap: wrap;
}

.ms-result-count,
.ms-panel .ms-count,
.ms-panel .ms-limit,
.ms-embedded .ms-count,
.ms-embedded .ms-limit {
  color: var(--secondary-text-color);
}

.ms-search {
  background: var(--input-surface-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.ms-search::placeholder {
  color: var(--secondary-text-color);
}

.ms-search:focus {
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.ms-action-btn {
  background: var(--inner-surface-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.ms-action-btn:hover:not(:disabled) {
  background: var(--inner-active-surface-bg);
  border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
}

.ms-action-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.ms-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--secondary-text-color);
  background: color-mix(in srgb, var(--border-color) 12%, var(--inner-surface-bg));
}

.ms-trigger {
  background: var(--input-surface-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.ms-trigger:hover,
.ms-trigger:focus-within {
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
}

.ms-trigger:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.ms-placeholder {
  color: var(--secondary-text-color);
}

.ms-tags > span {
  background: var(--inner-surface-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.ms-tags > span button {
  color: inherit;
}

.ms-tags .ms-extra-count {
  background: color-mix(in srgb, var(--border-color) 12%, var(--inner-surface-bg));
  color: var(--secondary-text-color);
}

.ms-item {
  color: var(--text-color);
}

.ms-item:hover {
  background: var(--inner-active-surface-bg);
}

.ms-item.ms-item-selected {
  background: color-mix(in srgb, var(--accent-color) 10%, var(--inner-surface-bg));
}

.ms-item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-color) 12%, var(--inner-active-surface-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
}

.ms-checkbox {
  border-color: var(--border-color);
}

.ms-checkbox-checked {
  background: var(--accent-color, var(--text-color));
  border-color: var(--accent-color, var(--text-color));
}

.ms-section > div:first-child,
.ms-embedded .ms-embedded-header,
.ms-embedded .ms-embedded-footer {
  background: var(--inner-surface-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.ms-toggle-section {
  color: var(--accent-color);
}

.ms-toggle-section:hover {
  color: color-mix(in srgb, var(--accent-color) 84%, var(--text-color));
}

.ms-default-badge {
  border: 1px solid color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, var(--inner-surface-bg));
  color: color-mix(in srgb, var(--accent-color) 76%, var(--text-color));
}

.ms-all-option {
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.ms-list {
  scrollbar-gutter: stable both-edges;
}

.ms-panel > div {
  border-color: var(--border-color);
}

.ms-panel,
.ms-embedded,
.ms-search,
.ms-action-btn,
.ms-item,
.ms-trigger,
.ms-tags > span,
.ms-default-badge {
  transition:
    background-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
}