/* ==========================================================================
   MOLECULES / dropdown / dropdown.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <div class="dropdown">
       <button class="btn btn-secondary dropdown-trigger"
               aria-haspopup="true" aria-expanded="false"
               aria-controls="dd-menu-1">
         Opsi <span class="dropdown-caret" aria-hidden="true"></span>
       </button>
       <ul class="dropdown-menu" id="dd-menu-1" role="menu" hidden>
         <li class="dropdown-item" role="menuitem">Edit</li>
         <li class="dropdown-item dropdown-item-danger" role="menuitem">Hapus</li>
         <li class="dropdown-divider" role="separator"></li>
         <li class="dropdown-item" role="menuitem">
           <span class="dropdown-item-icon"><!-- svg --></span>
           Dengan ikon
         </li>
       </ul>
     </div>
   ========================================================================== */

/* Wrapper */
.dropdown {
  position: relative;
  display:  inline-block;
}

/* Caret arrow */
.dropdown-caret {
  display:      inline-block;
  width:        0;
  height:       0;
  margin-left:  var(--size-200);
  border-left:  4px solid transparent;
  border-right: 4px solid transparent;
  border-top:   4px solid currentColor;
  transition:   transform var(--duration-fast) var(--ease-default);
  vertical-align: middle;
}

.dropdown[data-open="true"] .dropdown-caret {
  transform: rotate(180deg);
}

/* Menu */
.dropdown-menu {
  position:         absolute;
  top:              calc(100% + var(--size-100));
  left:             0;
  z-index:          var(--z-dropdown);
  min-width:        180px;
  background-color: var(--color-bg-elevated);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-lg);
  padding:          var(--size-200) 0;
  list-style:       none;
  margin:           0;
  outline:          none;

  animation: ds-scale-in var(--duration-moderate) var(--ease-spring) both;
  transform-origin: top left;
}

/* Right-aligned */
.dropdown-menu-right {
  left:  auto;
  right: 0;
  transform-origin: top right;
}

/* Top placement */
.dropdown-menu-top {
  top:    auto;
  bottom: calc(100% + var(--size-100));
  transform-origin: bottom left;
}

/* Item */
.dropdown-item {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
  padding:     var(--size-250) var(--size-400);
  font-size:   var(--text-body-size);
  color:       var(--color-text-primary);
  cursor:      pointer;
  transition:  background-color var(--duration-fast) var(--ease-default);
  user-select: none;
  white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item[data-focused="true"] {
  background-color: var(--color-bg-sunken);
  outline:          none;
}

.dropdown-item:active {
  background-color: var(--color-border-default);
}

/* Danger item */
.dropdown-item-danger {
  color: var(--color-error-text);
}
.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
  background-color: var(--color-error-subtle);
}

/* Disabled item */
.dropdown-item-disabled,
.dropdown-item[aria-disabled="true"] {
  color:          var(--color-text-disabled);
  cursor:         not-allowed;
  pointer-events: none;
}

/* Icon di dalam item */
.dropdown-item-icon {
  flex-shrink: 0;
  width:  var(--size-icon-md);
  height: var(--size-icon-md);
  color:  var(--color-text-secondary);
}

/* Right addon (shortcut, badge, dll) */
.dropdown-item-addon {
  margin-left: auto;
  font-size:   var(--text-caption-size);
  color:       var(--color-text-disabled);
}

/* Divider */
.dropdown-divider {
  height:     1px;
  background: var(--color-border-default);
  margin:     var(--size-200) 0;
}

/* Section label */
.dropdown-section-label {
  padding:        var(--size-200) var(--size-400) var(--size-100);
  font-size:      var(--text-label-sm-size);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  user-select:    none;
}

/* Checked state (untuk menu dengan pilihan) */
.dropdown-item-checked::before {
  content:     '✓';
  flex-shrink: 0;
  width:       var(--size-icon-md);
  font-size:   var(--font-size-200);
  color:       var(--color-brand);
  font-weight: var(--font-weight-bold);
}