.toast {
  @apply bg-black-pure--opacity-75 text-white px-5 py-3 rounded w-full relative;
}

.toast__pointer {
  @apply absolute;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, .75);
  top: -10px;
}

.toast__pointer--center {
  @apply transform-center-x;
}

.toast__pointer--right {
  transform: translateX(-1.25rem);
  right: 0;
}

.toast__pointer--left {
  transform: translateX(1.25rem);
  left: 0;
}

.toast__title,
.toast__subtitle {
  @apply leading-tight;
  letter-spacing: .025em;
}

.toast__title {
  @apply font-semibold text-sm;
}

.toast__subtitle {
  @apply text-grey text-xs mt-1 font-light;
}

/**
 * Transition
 */
.toast {
  will-change: transform, margin-top;
  transition: transform 250ms linear, margin-top 250ms linear;
  transform: translateZ(0);
  transform-origin: bottom;

  /**
   * Start in an un-entered state
   */
  transform: scaleY(0);
  margin-top: -60px;
}

.toast-enter,
.toast-enter-done {
  transform: scaleY(1);
  margin-top: 0;
}

.toast-exit,
.toast-exit-done {
  transform: scaleY(0);
  margin-top: -60px;
}