/* ============================================================
   TOASTS
   ============================================================ */
.toast-container
{
   position: fixed;
   z-index: 900;
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   pointer-events: none;
}

/* Позиции */
.toast-container--top-right
{
   top: calc(var(--header-height) + var(--space-4));
   right: var(--space-4);
}

.toast-container--top-left
{
   top: calc(var(--header-height) + var(--space-4));
   left: var(--space-4);
}

.toast-container--bottom-right
{
   bottom: var(--space-4);
   right: var(--space-4);
}

.toast-container--bottom-left
{
   bottom: var(--space-4);
   left: var(--space-4);
}

/* Тост */
.toast
{
   pointer-events: all;
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
   min-width: 18rem;
   max-width: 24rem;
   max-height: calc(100vh - 8rem);
   padding: var(--space-3) var(--space-4);
   border-radius: var(--border-radius-lg);
   border-left: 0.25rem solid;
   background: var(--bg-surface);
   box-shadow: var(--shadow-md);
   animation: toast-in 0.3s ease forwards;
}

.toast.removing
{
   animation: toast-out 0.25s ease forwards;
}

@keyframes toast-in
{
   from
   {
      opacity: 0;
      transform: translateX(2rem);
   }
   to
   {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes toast-out
{
   from
   {
      opacity: 1;
      transform: translateX(0);
      max-height: 10rem;
      margin-bottom: 0;
   }
   to
   {
      opacity: 0;
      transform: translateX(2rem);
      max-height: 0;
      margin-bottom: calc(-1 * var(--space-2));
      padding-top: 0;
      padding-bottom: 0;
   }
}

/* Иконка */
.toast__icon
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
}

.toast__icon svg
{
   width: 1.125rem;
   height: 1.125rem;
}

/* Контент */
.toast__content
{
   flex: 1;
   overflow-y: auto;
   max-height:40vh;   
}

.toast__title
{
   font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--space-1);
}

.toast__message
{
   font-size: var(--font-size-xs);
   color: var(--text-secondary);
   line-height: 1.5;
}

/* Кнопка закрытия */
.toast__close
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   color: var(--text-muted);
   border-radius: 0.25rem;
   transition: color var(--transition), background var(--transition);
   flex-shrink: 0;
   cursor: pointer;
}

.toast__close:hover
{
   color: var(--text-primary);
   background: var(--accent-light);
}

.toast__close svg
{
   width: 0.875rem;
   height: 0.875rem;
}

/* Прогресс-полоса */
.toast__progress
{
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0.1875rem;
   border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
   animation: toast-progress linear forwards;
}

.toast
{
   position: relative;
   overflow: hidden;
}

@keyframes toast-progress
{
   from { width: 100%; }
   to   { width: 0%; }
}

/* --- Варианты --- */
.toast--success
{
   border-left-color: var(--color-success);
}

.toast--success .toast__icon
{
   color: var(--color-success);
}

.toast--success .toast__progress
{
   background: var(--color-success);
}

.toast--warning
{
   border-left-color: var(--color-warning);
}

.toast--warning .toast__icon
{
   color: var(--color-warning);
}

.toast--warning .toast__progress
{
   background: var(--color-warning);
}

.toast--error
{
   border-left-color: var(--color-error);
}

.toast--error .toast__icon
{
   color: var(--color-error);
}

.toast--error .toast__progress
{
   background: var(--color-error);
}

.toast--info
{
   border-left-color: var(--color-info);
}

.toast--info .toast__icon
{
   color: var(--color-info);
}

.toast--info .toast__progress
{
   background: var(--color-info);
}

/* Мобильный */
@media (max-width: 49.9375rem)
{
   .toast-container--top-right,
   .toast-container--top-left
   {
      top: calc(var(--header-height) + var(--space-2));
      left: var(--space-3);
      right: var(--space-3);
   }

   .toast-container--bottom-right,
   .toast-container--bottom-left
   {
      bottom: var(--space-3);
      left: var(--space-3);
      right: var(--space-3);
   }

   .toast
   {
      min-width: unset;
      max-width: 100%;
   }
}