.footer {
  $multiplier: 4;

  align-items: flex-end;
  background: var(--dialog-bg);
  bottom: -1px; // hack to fix content being visible 1px below
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
  position: sticky;
  transition: box-shadow 0.1s ease-out, border-top 0.1s ease-out;
  z-index: 10;

  .left,
  .right {
    display: flex;
    gap: $unit;
  }

  @include breakpoint(phone) {
    position: fixed;
    bottom: $unit-14x;
    left: 0;
    right: 0;
  }
}
