@import '../abstract/_all';
.toast {
  display: flex;
  justify-content: space-between;
  background-color: black;
  bottom: 0;
  color: $c-white;
  left: 0;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  width: 100%;
  z-index: 3000;
  transition: all 0.3s ease;
  padding: 12px 20px;
  gap: 20px;
  @media (min-width: $break-sm) {
    transform: translate(-50%, 200%);
    bottom: 32px;
    left: 50%;
    max-width: 385px;
  }
  &.appear {
    transform: translateY(0);
    @media (min-width: $break-sm) {
      transform: translate(-50%, 0);
    }
  }
}