/**
 * TerminalSessionTabs Dropdown Styles.
 *
 * Uses CSS Anchor Positioning API for the "add container" dropdown.
 * The + button acts as anchor, dropdown is positioned below it
 * with automatic flip behavior at viewport edges.
 *
 * @module components/devenv/terminal/panel/terminal-session-tabs/styles
 */

/* + button - acts as CSS anchor */
.addButton {
  anchor-name: --session-tabs-add-anchor;
}

/* Container dropdown - anchored to + button */
.containerDropdown {
  position-anchor: --session-tabs-add-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: 200px;
  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;
}

.containerDropdown[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) {
  .containerDropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 50;
  }

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