.container {
  box-shadow: var(--shadow-3);
  border-radius: var(--space-2);
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  font-size: var(--font-size-2);
}
.container[data-state='open'] {
  animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.container[data-state='closed'] {
  animation: hide 100ms ease-in;
}
.container[data-swipe='move'] {
  transform: translateX(var(--radix-toast-swipe-move-x));
}
.container[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.container[data-swipe='end'] {
  animation: swipeOut 100ms ease-out;
}

.viewport {
  --viewport-padding: 25px;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--viewport-padding);
  gap: 10px;
  width: 240px;
  max-width: 100vw;
  margin: 0;
  list-style: none;
  z-index: 2147483647;
  outline: none;
}

.close {
  cursor: pointer;
  cursor: pointer;
  width: var(--space-4);
  height: var(--space-4);
  border: none;
  background: none;
  padding: 0;
  color: var(--gray-11);
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(calc(100% + var(--viewport-padding)));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes swipeOut {
  from {
    transform: translateX(var(--radix-toast-swipe-end-x));
  }
  to {
    transform: translateX(calc(100% + var(--viewport-padding)));
  }
}
