.toast {
  opacity: 0;
  position: absolute;
  z-index: 100;
  bottom: -3rem;
  right: -10rem;
  background: var(--color-bg);
  color: var(--color-font);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  transition: opacity 200ms, right 300ms, bottom 300ms, transform 200ms ease-out;
  padding: var(--padding-sm);
  transform: scale(0.8);
  border-radius: var(--radius-md);
  border: 1px solid var(--hl-sm);

  &.toast--show {
    opacity: 1;
    transform: scale(1);
    bottom: var(--padding-md);
    right: var(--padding-md);
  }

}