// 自定义组件样式 - 补充TailwindCSS无法覆盖的复杂样式

// 自定义按钮组件样式
.btn-custom {
  @include button-base;

  // 渐变按钮
  &.btn-gradient {
    background: linear-gradient(
      135deg,
      var(--color-primary-500),
      var(--color-primary-600)
    );
    color: white;

    &:hover:not(:disabled) {
      background: linear-gradient(
        135deg,
        var(--color-primary-600),
        var(--color-primary-700)
      );
    }
  }

  // 玻璃态按钮
  &.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);

    &:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

// 自定义卡片组件样式
.card-custom {
  @include card;

  // 悬浮卡片
  &.card-hover {
    transform: translateY(0);
    transition:
      transform var(--transition-normal),
      box-shadow var(--transition-normal);

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-xl);
    }
  }

  // 玻璃态卡片
  &.card-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

// 自定义输入框样式
.input-custom {
  @include input-base;

  // 浮动标签输入框
  &.input-floating {
    position: relative;

    .floating-label {
      position: absolute;
      left: var(--spacing-md);
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--color-background);
      padding: 0 var(--spacing-xs);
      color: var(--color-text-secondary);
      transition: all var(--transition-fast);
      pointer-events: none;
    }

    &:focus-within .floating-label,
    &.has-value .floating-label {
      top: 0;
      font-size: var(--text-xs);
      color: var(--color-primary-500);
    }
  }
}

// 加载状态样式
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .loading-spinner {
    @include loading-spinner(40px);
  }
}

// 模态框样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal-content {
    @include card(var(--spacing-xl));
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    @include fade-in;
  }
}

// 工具提示样式
.tooltip {
  position: relative;

  &::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-900);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast);
    z-index: 1000;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-gray-900);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast);
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

// 进度条样式
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;

  .progress-fill {
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--color-primary-500),
      var(--color-primary-600)
    );
    border-radius: var(--radius-md);
    transition: width var(--transition-normal);
  }
}

// 标签样式
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;

  &.badge-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
  }

  &.badge-success {
    background: #d1fae5;
    color: #065f46;
  }

  &.badge-warning {
    background: #fef3c7;
    color: #92400e;
  }

  &.badge-error {
    background: #fee2e2;
    color: #991b1b;
  }
}
