/**
 * TextCard 文本卡片组件样式
 */

.text-card {
  display: inline-flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: default;
  user-select: none;

  // ========== 可点击状态 ==========
  &--clickable {
    cursor: pointer;

    &:active {
      transform: scale(0.98);
    }
  }

  // ========== 尺寸变体 ==========
  &--small {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 22px;
    gap: 8px;
    border-radius: 4px;
  }

  &--default {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 22px;
    gap: 12px;
    border-radius: 6px;
  }

  &--large {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 24px;
    gap: 16px;
    border-radius: 8px;
  }

  // ========== 样式变体 1: 纯文本 ==========
  &--text {
    background: transparent;
    border: none;

    &.text-card--active {
      color: var(--theme-color, #7F56D9);
      font-weight: 600;
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading).text-card--clickable {
      color: var(--theme-color-light, #B692F6);
    }
  }

  // ========== 样式变体 2: 圆角背景（填充） ==========
  &--filled {
    border-radius: 40px;

    &.text-card--active {
      background: var(--theme-color, #7F56D9);
      color: #fff;
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
      background: #F2F4F7;
    }
  }

  // ========== 样式变体 3: 浅色背景 ==========
  &--light {
    &.text-card--active {
      background: var(--theme-color-bg, #F9F5FF);
      color: var(--theme-color, #7F56D9);
      font-weight: 600;
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
      background: #F2F4F7;
    }
  }

  // ========== 样式变体 4: 描边 ==========
  &--outlined {
    background: transparent;
    color: var(--Gray-600, #475467);

    &.text-card--active {
      color: #000;
      background: var(--Gray-100, #F2F4F7);
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
      color: #000;
      background: var(--Gray-50, #F9FAFB);
    }
  }

  // ========== 样式变体 5: 渐变 ==========
  &--gradient {
    background: transparent;
    color: var(--Gray-500, #667085);

    &.text-card--active {
      border-radius: 6px;
      background: var(--Base-White, #FFF);
      /* Shadow/sm */
      box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
      color: var(--Gray-900, #101828);
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
      color: #000;
    }
  }

  // ========== 样式变体 6: 虚线 ==========
  &--dashed {
    background: transparent;
    color: var(--Gray-600, #475467);

    &.text-card--active {
      border-radius: 8px 8px 0 0;
      border-top: 1px solid var(--Gray-300, #D0D5DD);
      border-right: 1px solid var(--Gray-300, #D0D5DD);
      border-left: 1px solid var(--Gray-300, #D0D5DD);
      background: var(--Base-White, #FFF);
      color: var(--theme-color, #7F56D9);
    }

    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
      color: var(--Base-Black, #000);
    }
  }

  // ========== 状态样式 ==========
  &--disabled {
    cursor: not-allowed;
    opacity: 0.4;
    color: rgba(0, 0, 0, 0.25);
  }

  &--loading {
    cursor: wait;
    opacity: 0.6;
  }

  // ========== 内容容器 ==========
  &__content {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  // ========== 图标容器 ==========
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;

    &--prefix {
      // 前置图标样式
    }

    &--suffix {
      // 后置图标样式
    }
  }

  // ========== 标签容器 ==========
  &__tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  // ========== Extra 容器 ==========
  &__extra {
    margin-left: auto;
    flex-shrink: 0;
  }
}