/**
  DIALOG
 */
.dialog {
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  max-width: 50%;
  width: 90%;
  animation: pop 0.2s ease;

  .dialogForm {
    & > * {
      margin-right: 12px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

@keyframes pop {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/**
  Snackbar
 */
.snackbar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  animation: fadeinout 5s ease forwards;
}

@keyframes fadeinout {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  90%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}