.button-outline {
  display: inline-flex;
  gap: 28px;
  align-items: center;

  border: 1px solid #888;
  padding: 13px 20px;

  margin-top: 12px;

  color: var(--white);
  font-size: 12px;
  letter-spacing: .04em;
  background: none;
  cursor: pointer;
}

.flash-toast-wrap {
  position: fixed;
  z-index: 100;

  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 90%;
  max-width: 420px;
}

.flash-toast {
  padding: 14px 20px;
  border-radius: 4px;

  color: var(--white);
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;

  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);

  opacity: 1;
  transition: opacity .4s ease;
}

.flash-toast.fade-out {
  opacity: 0;
}

.flash-toast.success {
  background: var(--oxblood);
}

.flash-toast.error {
  background: var(--black);
  border: 1px solid var(--oxblood);
}

.hidden {
  display: none;
}
