/* =========================
a-----b
|     |
|     |
d-----c

00----10
|     |
|     |
01----11
============================*/
@mixin offset($corner: d) {
  @if $corner == a {
    transform: translateX(calc(-1 * var(--theme-spacing--offset)))
      translateY(calc(-1 * var(--theme-spacing--offset)));
  }

  @if $corner == b {
    transform: translateX(var(--theme-spacing--offset))
      translateY(calc(-1 * var(--theme-spacing--offset)));
  }

  @if $corner == c {
    transform: translateX(var(--theme-spacing--offset))
      translateY(var(--theme-spacing--offset));
    color: var(--pop);
  }

  @if $corner == d {
    transform: translateX(calc(-1 * var(--theme-spacing--offset)))
      translateY(var(--theme-spacing--offset));
  }

  @if $corner == ab {
    transform: translateX(0)
      translateY(calc(-1 * var(--theme-spacing--offset)));
  }

  @if $corner == bc {
    transform: translateX(var(--theme-spacing--offset)) translateY(0);
  }

  @if $corner == dc {
    transform: translateX(0) translateY(var(--theme-spacing--offset));
  }

  @if $corner == da {
    transform: translateX(calc(-1 * var(--theme-spacing--offset)))
      translateY(0);
  }
}
