.toast{
  width: 344px !important;
  padding: 0 var(--spacing-4);
  min-height: 36px;
}

.toast__long{
  align-items: start;
  padding: var(--spacing-2);
}

.toast__short{
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2);
}

.toast__content{
  width: 336px;
}

.toast .toast__action-message{
  text-decoration: none;
}

.toast .toast__long .toast__content{
  gap: var(--gap-lg)
}

.toast .toast__short .toast__content{
  gap: var(--gap-xs)
}

.toast .toast__long .toast__top{
  padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-6);
}

.toast .toast__short .toast__top{
  padding: var(--spacing-4) 0 var(--spacing-3) var(--spacing-2);
}

.toast .toast__long .toast__icon{
  margin-top: -4px;
  font-size: 22px;
  height: 24px;
}

.toast .toast__short .toast__icon{
  margin-top: -6px;
  font-size: var(--font-size-xl);
  height: 20px;
}


.toast__close-btn {
  width: var(--spacing-6);
  height: var(--spacing-6);
  background-color: transparent;
  font-size: 10px;
}

.toast.info .toast__close-btn:hover {
  background-color: var(--blue-100);
}

.toast.warning .toast__close-btn:hover {
  background-color: var(--warning-100);
}

.toast.error .toast__close-btn:hover {
  background-color: var(--error-100);
}

.toast.success .toast__close-btn:hover {
  background-color: var(--success-100);
}

.toast-container {
  position: fixed;
  right: 24px;
  top: 80px;
  z-index: 50;
  margin-left: 280px;
}

@media (max-width: 480px) {
  .toast {
    width: 100% !important;
    max-width: 90vw;
    box-sizing: border-box;
    padding: 0;
  }

  .toast__content {
    width: 100%;
    padding: 0 var(--spacing-5);
    box-sizing: border-box;
  }

  .toast .toast__short .toast__top,
  .toast .toast__short .toast__message {
    padding: var(--spacing-3) 0;
  }
}