div.toast
  max-width: 60%
  padding: 1rem 2rem
  line-height: 1.5
  color: var(--text-p1)
  font-weight: 500
  text-align: center
  border-radius: 8px
  background: var(--card)
  position: fixed
  left: 50%
  top: 32px
  transform: translateX(-50%)
  z-index: 9
  disable-select()
  box-shadow: $boxshadow-toast
  visibility: hidden

  &.show
    visibility: visible
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2s
    animation: fadein 0.5s, fadeout 0.5s 2s
    animation-fill-mode: forwards

  @-webkit-keyframes fadein 
    from {top: -64px; opacity: 0;}
    to {top: 32px; opacity: 1;}
  @keyframes fadein
    from {top: -64px; opacity: 0;}
    to {top: 32px; opacity: 1;}

  @-webkit-keyframes fadeout
    from {top: 32px; opacity: 1;}
    to {top: -64px; opacity: 0;}
  @keyframes fadeout
    from {top: 32px; opacity: 1;}
    to {top: -64px; opacity: 0;}