/*
  container: .a-float
  positioned element: .a-float--{tl|tr|bl|br}
*/
.a-float {
  position: relative;
}

.a-float--tl,
.a-float--tr,
.a-float--bl,
.a-float--br {
  --offset: var(--a-float-offset, var(--lens-core-spacing-0-5));
  position: absolute;
  inset-inline-start: var(--x-start, unset);
  inset-inline-end: var(--x-end, unset);
  inset-block-start: var(--y-start, unset);
  inset-block-end: var(--y-end, unset);
  transform: translate(var(--t-x, 0), var(--t-y, 0));
}

.a-float--tl {
  --x-start: var(--offset);
  --y-start: var(--offset);
  --t-x: -50%;
  --t-y: -50%;
}

.a-float--tr {
  --x-end: var(--offset);
  --y-start: var(--offset);
  --t-x: 50%;
  --t-y: -50%;
}

.a-float--bl {
  --x-start: var(--offset);
  --y-end: var(--offset);
  --t-x: -50%;
  --t-y: 50%;
}

.a-float--br {
  --y-end: var(--offset);
  --x-end: var(--offset);
  --t-y: 50%;
  --t-x: 50%;
}