@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-speed-dial {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cinder-speed-dial__trigger {
    position: relative;
    z-index: 1;
  }

  .cinder-speed-dial__actions {
    position: absolute;
    display: flex;
    gap: var(--cinder-space-3);
    pointer-events: none;
    z-index: var(--cinder-z-popover);
    /* `_floating-surface.css` only enables scrolling for `role="listbox"` and
       `role="menu"` — this toolbar's own block size is capped by the shared
       `max-block-size`, so it needs its own overflow behavior or a vertical
       SpeedDial with enough actions to exceed that cap has no way to reach
       the actions that overflow past the viewport. */
    overflow-y: auto;
  }

  /*
   * Keep the action surface mounted while its children play their exit
   * transition, but remove the shared floating-surface chrome whenever the
   * surface is closed. The surface remains inert in the component markup,
   * so this is purely a visual reset.
   */
  .cinder-speed-dial__actions:not([data-cinder-open]) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow-y: hidden;
  }

  .cinder-speed-dial__actions[data-cinder-direction='up'] {
    flex-direction: column-reverse;
  }

  .cinder-speed-dial__actions[data-cinder-direction='down'] {
    flex-direction: column;
  }

  .cinder-speed-dial__actions[data-cinder-direction='left'] {
    flex-direction: row-reverse;
  }

  .cinder-speed-dial__actions[data-cinder-direction='right'] {
    flex-direction: row;
  }

  .cinder-speed-dial__actions[data-cinder-open] {
    pointer-events: auto;
  }

  .cinder-speed-dial__actions[data-cinder-open]:not([data-cinder-position-ready]) {
    visibility: hidden;
  }

  .cinder-speed-dial-action {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-2);
    opacity: 0;
    transform: scale(0.86);
    transition:
      opacity var(--cinder-duration-fast) var(--cinder-ease-standard),
      transform var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-speed-dial__actions[data-cinder-open] .cinder-speed-dial-action {
    opacity: 1;
    transform: none;
  }

  .cinder-speed-dial__actions[data-cinder-direction='up'] .cinder-speed-dial-action,
  .cinder-speed-dial__actions[data-cinder-direction='down'] .cinder-speed-dial-action {
    flex-direction: row;
  }

  .cinder-speed-dial__actions[data-cinder-direction='left'] .cinder-speed-dial-action {
    flex-direction: row-reverse;
  }

  .cinder-speed-dial__actions[data-cinder-direction='right'] .cinder-speed-dial-action {
    flex-direction: row;
  }

  .cinder-speed-dial-action[data-cinder-label-placement='start'] {
    flex-direction: row-reverse;
  }

  .cinder-speed-dial-action[data-cinder-label-placement='end'] {
    flex-direction: row;
  }

  .cinder-speed-dial-action__label {
    max-inline-size: 12rem;
    padding: var(--cinder-space-1) var(--cinder-space-2);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text);
    box-shadow: var(--cinder-shadow-sm);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-tight);
    white-space: nowrap;
  }

  .cinder-speed-dial__actions:not([data-cinder-open]) .cinder-speed-dial-action {
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-speed-dial-action {
      transition: none;
    }
  }

  .cinder-speed-dial__spacing-probe {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    inline-size: var(--cinder-space-3);
    block-size: 0;
  }
}