.lio-popover {
  position: relative;
  display: inline-flex;
  font-family: var(--font);
}

.lio-popover__content {
  position: absolute;
  z-index: 70;
  display: grid;
  gap: var(--space-base);
  inline-size: max-content;
  min-inline-size: calc(var(--size-6xl) * 4);
  max-inline-size: min(calc(100vw - (var(--space-lg) * 2)), calc(var(--size-6xl) * 6));
  padding: var(--space-base);
  background: var(--surface);
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  outline: none;
  animation: lio-popover-in 150ms ease both;
}

.lio-popover__content[hidden] {
  display: none;
}

.lio-popover[data-side="bottom"] .lio-popover__content {
  inset-block-start: calc(100% + var(--space-xs));
}

.lio-popover[data-side="top"] .lio-popover__content {
  inset-block-end: calc(100% + var(--space-xs));
}

.lio-popover[data-side="right"] .lio-popover__content {
  inset-inline-start: calc(100% + var(--space-xs));
}

.lio-popover[data-side="left"] .lio-popover__content {
  inset-inline-end: calc(100% + var(--space-xs));
}

.lio-popover[data-side="top"] .lio-popover__content,
.lio-popover[data-side="bottom"] .lio-popover__content {
  inset-inline-start: 50%;
  transform-origin: top center;
}

.lio-popover[data-side="top"] .lio-popover__content {
  transform-origin: bottom center;
}

.lio-popover[data-side="top"][data-align="start"] .lio-popover__content,
.lio-popover[data-side="bottom"][data-align="start"] .lio-popover__content {
  inset-inline-start: var(--space-zero);
}

.lio-popover[data-side="top"][data-align="center"] .lio-popover__content,
.lio-popover[data-side="bottom"][data-align="center"] .lio-popover__content {
  inset-inline-start: 50%;
  translate: -50% 0;
}

.lio-popover[data-side="top"][data-align="end"] .lio-popover__content,
.lio-popover[data-side="bottom"][data-align="end"] .lio-popover__content {
  inset-inline-end: var(--space-zero);
  inset-inline-start: auto;
}

.lio-popover[data-side="left"] .lio-popover__content,
.lio-popover[data-side="right"] .lio-popover__content {
  inset-block-start: 50%;
  translate: 0 -50%;
  transform-origin: center left;
}

.lio-popover[data-side="left"] .lio-popover__content {
  transform-origin: center right;
}

.lio-popover[data-side="left"][data-align="start"] .lio-popover__content,
.lio-popover[data-side="right"][data-align="start"] .lio-popover__content {
  inset-block-start: var(--space-zero);
  translate: 0 0;
}

.lio-popover[data-side="left"][data-align="end"] .lio-popover__content,
.lio-popover[data-side="right"][data-align="end"] .lio-popover__content {
  inset-block-end: var(--space-zero);
  inset-block-start: auto;
  translate: 0 0;
}

.lio-popover__header {
  display: grid;
  gap: var(--space-xxs);
}

.lio-popover__title {
  margin: var(--space-zero);
  color: var(--text);
  font: var(--heading-m);
}

.lio-popover__description {
  margin: var(--space-zero);
  color: var(--text-secondary);
  font: var(--body-s);
}

.lio-popover__body {
  min-inline-size: var(--space-zero);
  color: var(--text-secondary);
  font: var(--body-m);
}

.lio-popover__body > :first-child {
  margin-block-start: var(--space-zero);
}

.lio-popover__body > :last-child {
  margin-block-end: var(--space-zero);
}

.lio-popover__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-w) solid var(--border-subtle);
}

.lio-popover[data-lio-popover-fixed] .lio-popover__content {
  position: fixed;
  inset: var(--lio-popover-fixed-top, var(--space-zero)) auto auto var(--lio-popover-fixed-left, var(--space-zero));
  translate: none;
}