/* =========================================
   DROPDOWNS
========================================= */


/* =========================================
   DROPDOWN CONTAINER
========================================= */

.dropdown {

  position: relative;

  display: inline-block;
}


/* =========================================
   DROPDOWN TOGGLE
========================================= */

.dropdown-toggle {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap:
    var(--space-2);

  padding:
    10px 12px;

  border-radius:
    var(--radius-md);

  color:
    var(--color-text-light);

  font-weight:
    var(--font-medium);

  cursor: pointer;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.dropdown-toggle:hover {

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-dark);
}


/* =========================================
   DROPDOWN MENU
========================================= */

.dropdown-menu {

  position: absolute;

  top: calc(100% + 10px);
  left: 0;

  min-width: 220px;

  background:
    var(--color-white);

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-card);

  padding:
    var(--space-3);

  display: none;

  flex-direction: column;

  gap:
    var(--space-2);

  z-index:
    var(--z-dropdown);

  animation:
    dropdownFade
    0.2s ease;
}


/* =========================================
   SHOW STATE
========================================= */

.dropdown-menu.show {

  display: flex;
}


/* =========================================
   DROPDOWN ITEMS
========================================= */

.dropdown-item {

  display: flex;

  align-items: center;

  gap:
    var(--space-3);

  width: 100%;

  padding:
    10px 14px;

  border-radius:
    var(--radius-md);

  font-size:
    var(--text-sm);

  color:
    var(--color-text-light);

  transition:
    all var(--transition-fast);

  cursor: pointer;
}


.dropdown-item:hover {

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-dark);
}


/* =========================================
   DROPDOWN DIVIDER
========================================= */

.dropdown-divider {

  height: 1px;

  background:
    var(--color-border);

  margin:
    var(--space-2) 0;
}


/* =========================================
   RIGHT ALIGNED DROPDOWN
========================================= */

.dropdown-right .dropdown-menu {

  left: auto;
  right: 0;
}


/* =========================================
   DROPDOWN HEADER
========================================= */

.dropdown-header {

  padding:
    var(--space-3);

  border-bottom:
    1px solid var(--color-border);

  margin-bottom:
    var(--space-2);
}


.dropdown-title {

  font-size:
    var(--text-sm);

  font-weight:
    var(--font-semibold);

  color:
    var(--color-text);
}


.dropdown-subtitle {

  font-size:
    var(--text-xs);

  color:
    var(--color-text-muted);

  margin-top:
    2px;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes dropdownFade {

  from {

    opacity: 0;

    transform:
      translateY(-6px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .dropdown-menu {

    min-width: 200px;
  }
}