/**
 * Component: Dropdown
 * Markup pattern (built by assets/js/components/dropdown.js):
 * <div class="dropdown">
 *   <button class="dropdown__trigger" aria-haspopup="true" aria-expanded="false">...</button>
 *   <div class="dropdown__menu" role="menu" hidden>
 *     <a class="dropdown__item" role="menuitem" href="#">...</a>
 *   </div>
 * </div>
 */

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

.dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-md);
  padding: var(--sf-space-2);
  z-index: var(--sf-z-dropdown);
}
.dropdown__menu[hidden] { display: none; }
.dropdown__menu--right { left: auto; right: 0; }

.dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sf-space-2) var(--sf-space-3);
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-900);
  text-decoration: none;
  background: none;
  border: none;
}
.dropdown__item:hover, .dropdown__item:focus-visible {
  background: var(--sf-indigo-50);
  color: var(--sf-indigo-600);
}

.dropdown__divider {
  height: 1px;
  background: var(--sf-border);
  margin: var(--sf-space-2) 0;
}