/* ==========================================================================
   Dropdown Component – CAAT Design System
   Depends on: tokens.css (consumes SEMANTIC tokens)
   ========================================================================== */

.caat-dropdown {
  font-family: var(--caat-font-primary);
}

/* --- Menu --- */
.caat-dropdown .dropdown-menu {
  border: 1px solid var(--caat-color-border);
  border-radius: var(--caat-radius);
  box-shadow: var(--caat-shadow);
  padding: 0.5rem 0;
  font-size: var(--caat-font-size-xs);
  min-width: 12rem;
}

/* --- Items --- */
.caat-dropdown .dropdown-item {
  padding: 0.5rem 1rem;
  color: var(--caat-color-text);
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.caat-dropdown .dropdown-item:hover,
.caat-dropdown .dropdown-item:focus,
.caat-dropdown .dropdown-item.is-hover,
.caat-dropdown .dropdown-item.is-focus {
  background-color: var(--caat-color-state-hover-bg);
  color: var(--caat-color-text-heading);
}

.caat-dropdown .dropdown-item:focus-visible,
.caat-dropdown .dropdown-item.is-focus {
  outline: 0;
  box-shadow: var(--caat-color-focus-ring-inset);
}

.caat-dropdown .dropdown-item.active,
.caat-dropdown .dropdown-item:active,
.caat-dropdown .dropdown-item.is-active {
  background-color: var(--caat-color-state-selected-bg);
  color: var(--caat-color-state-selected-text);
}

.caat-dropdown .dropdown-item.disabled {
  color: var(--caat-color-text-disabled);
  pointer-events: none;
}

/* --- Icons in items --- */
.caat-dropdown .dropdown-item .bi {
  margin-right: 0.5rem;
  font-size: 1em;
  vertical-align: -0.1em;
}

/* --- Headers & Dividers --- */
.caat-dropdown .dropdown-header {
  font-size: var(--caat-font-size-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--caat-color-text-muted);
  padding: 0.5rem 1rem 0.25rem;
}

.caat-dropdown .dropdown-divider {
  border-top-color: var(--caat-color-border);
  margin: 0.35rem 0;
}

/* --- Dark variant --- */
.caat-dropdown .dropdown-menu-dark {
  background-color: var(--caat-color-bg-brand);
  border-color: rgba(255, 255, 255, 0.1);
}

.caat-dropdown .dropdown-menu-dark .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
}

.caat-dropdown .dropdown-menu-dark .dropdown-item:hover,
.caat-dropdown .dropdown-menu-dark .dropdown-item:focus,
.caat-dropdown .dropdown-menu-dark .dropdown-item.is-hover,
.caat-dropdown .dropdown-menu-dark .dropdown-item.is-focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--caat-color-text-inverse);
}

.caat-dropdown .dropdown-menu-dark .dropdown-header {
  color: rgba(255, 255, 255, 0.5);
}

.caat-dropdown .dropdown-menu-dark .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* --- Split button: seamlessly joined --- */
.caat-dropdown.btn-group .caat-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.caat-dropdown.btn-group .dropdown-toggle-split {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}