@use '../tokens' as t;

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

.panel {
  @include t.surface('surface-raised', 'lg');
  position: absolute;
  z-index: t.z(popover);
  min-inline-size: 12rem;
  max-inline-size: min(24rem, 90vw);
  padding: t.space(4);
  color: t.role('fg');
}

.placement-block-end {
  inset-block-start: calc(100% + #{t.space(2)});
}

.placement-block-start {
  inset-block-end: calc(100% + #{t.space(2)});
}

.placement-inline-end {
  inset-inline-start: calc(100% + #{t.space(2)});
  inset-block-start: 0;
}

.placement-inline-start {
  inset-inline-end: calc(100% + #{t.space(2)});
  inset-block-start: 0;
}

// Alignment is along the anchor's inline edge, so it exists only for the block placements. An
// inline placement owns both inline insets itself; an align rule that reached it (and the reset
// that used to undo one) wiped the placement's own inset and dropped the panel over the anchor.
.placement-block-end,
.placement-block-start {
  &.align-start {
    inset-inline-start: 0;
  }

  &.align-end {
    inset-inline-end: 0;
  }

  // Auto margins inside an inset band far wider than any panel: centred in either direction. A 50%
  // logical inset with a -50% physical translate is a whole width off under `dir="rtl"`.
  &.align-center {
    inset-inline: -100vw;
    margin-inline: auto;
    inline-size: fit-content;
  }
}