/**
 * TerminalFilterDropdown Styles.
 *
 * Uses CSS Anchor Positioning API for dropdown placement.
 * Button acts as anchor, dropdown is positioned relative to it
 * with automatic flip behavior at viewport edges.
 *
 * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
 */

/* Trigger button - acts as CSS anchor */
.triggerButton {
  anchor-name: --filter-dropdown-anchor;
}

/* Dropdown menu - anchored to trigger button */
.dropdownMenu {
  position-anchor: --filter-dropdown-anchor;
  position: fixed;

  /* Position below and left-aligned */
  left: anchor(left);
  top: anchor(bottom);
  margin-top: 4px;

  /* Flip to above if no room below */
  position-try-fallbacks: flip-block, flip-inline;

  min-width: 180px;
  z-index: 50;

  /* Hidden by default */
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: none;
}

.dropdownMenu[data-open="true"] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fallback for browsers without CSS Anchor Positioning */
@supports not (anchor-name: none) {
  .dropdownMenu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 50;
  }

  .dropdownMenu[data-open="true"] {
    display: block;
  }
}