[class*='Fixed'] {
  position: fixed;
}

// Consider changing this to nudging with margins...
// So top left right can be simpler
[class*='Fixed-top'] {
  top: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-topleft {
  right: auto;
}

.Fixed-topright {
  left: auto;
}

[class*='Fixed-bottom'] {
  bottom: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-bottomleft {
  right: auto;
}

.Fixed-bottomright {
  left: auto;
}

[class*='Fixed-left'] {
  top: var(--nudge-y, var(--nudge, 0));
  bottom: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
}

.Fixed-lefttop {
  bottom: auto;
}

.Fixed-leftbottom {
  top: auto;
}

[class*='Fixed-right'] {
  top: var(--nudge-y, var(--nudge, 0));
  bottom: var(--nudge-y, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-righttop {
  bottom: auto;
}

.Fixed-rightbottom {
  top: auto;
}

.Fixed-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Fixed-overlay {
  pointer-events: none;
  display: grid;
  inset-block: var(--nudge-y, var(--nudge, 0));
  inset-inline: var(--nudge-x, var(--nudge, 0));
}