/**
 * @file toast.css
 * @description ZUOEKAI插件通用Toast样式 - 基于ZUOEKAI配色系统
 * @author ZUOEKAI Team
 * @created 2025-11-04
 * @updated 2025-11-11 v4 - Toast使用主题渐变背景，文字颜色分主题定义
 * @note 依赖 variables.css（已在 manifest.json 中先引入）
 */

/* ==================== 
   Toast容器 - 不同位置
   ==================== */
.zuoekai-plugin-toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--zuoekai-plugin-toast-gap);
  pointer-events: none;
  z-index: 9999999;
  max-width: 420px;
}

/* 顶部位置 */
.zuoekai-plugin-toast-container--top-left {
  top: 20px;
  left: 20px;
  align-items: flex-start;
}

.zuoekai-plugin-toast-container--top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.zuoekai-plugin-toast-container--top-right {
  top: 20px;
  right: 20px;
  align-items: flex-end;
}

/* 底部位置 */
.zuoekai-plugin-toast-container--bottom-left {
  bottom: 20px;
  left: 20px;
  align-items: flex-start;
  flex-direction: column-reverse;
}

.zuoekai-plugin-toast-container--bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

.zuoekai-plugin-toast-container--bottom-right {
  bottom: 20px;
  right: 20px;
  align-items: flex-end;
  flex-direction: column-reverse;
}

/* ==================== 
   Toast主体
   ==================== */
.zuoekai-plugin-toast {
  position: relative;
  border-radius: var(--zuoekai-plugin-toast-radius);
  box-shadow: var(--zuoekai-plugin-toast-shadow);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zuoekai-plugin-toast-text-color);
  overflow: hidden;
  
  /* 主题渐变背景 + 渐变边框 */
  border: 2px solid transparent;
  background: var(--zuoekai-plugin-gradient-primary) padding-box,
              var(--zuoekai-plugin-gradient-border) border-box;
  
  /* 初始状态（隐藏） */
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--zuoekai-plugin-toast-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 显示状态 */
.zuoekai-plugin-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* 隐藏动画 */
.zuoekai-plugin-toast--hiding {
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--zuoekai-plugin-toast-duration) ease-out;
}

/* ==================== 
   Toast内容布局
   ==================== */
.zuoekai-plugin-toast__content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}

/* 图标 */
.zuoekai-plugin-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  background: transparent;
}

/* 消息文本 */
.zuoekai-plugin-toast__message {
  flex: 1;
  word-break: break-word;
  color: var(--zuoekai-plugin-toast-text-color);
  background: transparent;
}

/* 关闭按钮 */
.zuoekai-plugin-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--zuoekai-plugin-toast-text-color);
  transition: color 0.2s ease;
  border-radius: 50%;
  opacity: 0.8;
}

.zuoekai-plugin-toast__close:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* ==================== 
   进度条
   ==================== */
.zuoekai-plugin-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--zuoekai-plugin-bg-gray-100);
  overflow: hidden;
}

.zuoekai-plugin-toast__progress-bar {
  height: 100%;
  width: 100%;
  background: var(--zuoekai-plugin-gradient-primary);
  transition: width 0s linear;
}

/* ==================== 
   不同类型的样式
   ==================== */

/* Success */
.zuoekai-plugin-toast--success .zuoekai-plugin-toast__icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--zuoekai-plugin-success);
}

.zuoekai-plugin-toast--success .zuoekai-plugin-toast__progress-bar {
  background: var(--zuoekai-plugin-success);
}

.zuoekai-plugin-toast--success {
  box-shadow: rgba(34, 197, 94, 0.3) 0px 0px 12px, 
              var(--zuoekai-plugin-toast-shadow);
}

/* Error */
.zuoekai-plugin-toast--error .zuoekai-plugin-toast__icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--zuoekai-plugin-error);
}

.zuoekai-plugin-toast--error .zuoekai-plugin-toast__progress-bar {
  background: var(--zuoekai-plugin-error);
}

.zuoekai-plugin-toast--error {
  box-shadow: rgba(239, 68, 68, 0.3) 0px 0px 12px, 
              var(--zuoekai-plugin-toast-shadow);
}

/* Warning */
.zuoekai-plugin-toast--warning .zuoekai-plugin-toast__icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--zuoekai-plugin-warning);
}

.zuoekai-plugin-toast--warning .zuoekai-plugin-toast__progress-bar {
  background: var(--zuoekai-plugin-warning);
}

.zuoekai-plugin-toast--warning {
  box-shadow: rgba(245, 158, 11, 0.3) 0px 0px 12px, 
              var(--zuoekai-plugin-toast-shadow);
}

/* Info */
.zuoekai-plugin-toast--info .zuoekai-plugin-toast__icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--zuoekai-plugin-info);
}

.zuoekai-plugin-toast--info .zuoekai-plugin-toast__progress-bar {
  background: var(--zuoekai-plugin-info);
}

.zuoekai-plugin-toast--info {
  box-shadow: rgba(59, 130, 246, 0.3) 0px 0px 12px, 
              var(--zuoekai-plugin-toast-shadow);
}

/* Loading */
.zuoekai-plugin-toast--loading .zuoekai-plugin-toast__icon {
  background: transparent;
  color: var(--zuoekai-plugin-primary);
}

.zuoekai-plugin-toast--loading {
  box-shadow: var(--zuoekai-plugin-shadow-primary), 
              var(--zuoekai-plugin-toast-shadow);
}

/* ==================== 
   Loading动画
   ==================== */
.zuoekai-plugin-toast__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--zuoekai-plugin-bg-gray-100);
  border-top-color: var(--zuoekai-plugin-primary);
  border-radius: 50%;
  animation: zuoekai-toast-spin 0.8s linear infinite;
}

@keyframes zuoekai-toast-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== 
   不同动画类型
   ==================== */

/* Slide动画（默认）- 已在主体中定义 */

/* Fade动画 */
.zuoekai-plugin-toast--fade {
  transform: none;
  opacity: 0;
}

.zuoekai-plugin-toast--fade.zuoekai-plugin-toast--visible {
  opacity: 1;
}

/* Bounce动画 */
.zuoekai-plugin-toast--bounce {
  animation: zuoekai-toast-bounce var(--zuoekai-plugin-toast-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.zuoekai-plugin-toast--bounce.zuoekai-plugin-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes zuoekai-toast-bounce {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  50% {
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==================== 
   响应式
   ==================== */
@media (max-width: 640px) {
  .zuoekai-plugin-toast-container {
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px);
    transform: none !important;
  }
  
  .zuoekai-plugin-toast {
    min-width: auto;
    width: 100%;
  }
}