// 商品卡片信息的名称删除按钮组
.card-prod-info-btn {
  font-size: 14px; // 设置整个容器的基础字体大小为14像素

  .prod-name { // 商品名称样式
    white-space: nowrap; // 强制在同一行内显示文本，不进行换行
    text-overflow: ellipsis; // 当文本溢出其容器时，用省略号（...）表示被截断的文本
    overflow: hidden; // 隐藏溢出容器的内容，与text-overflow配合使用以实现文本截断效果
    padding: 0 8px; // 为商品名称添加左右各8像素的内边距，使其与容器边缘保持适当距离
  }

  .del-btn { // 删除按钮样式
    line-height: 20px; // 设置行高为20像素，确保按钮内的文本垂直居中对齐
    text-align: right; // 文本右对齐，使删除图标或文字靠右显示
    padding-right: 8px; // 为删除按钮右侧添加8像素的内边距，保证与其他元素有足够的间距
    user-select: none; // 禁止用户选中文本，改善用户体验，特别是对于交互性元素

    span { // 删除按钮内部span标签的样式
      color: #155bd4; // 设置删除按钮文本颜色为蓝色，用于指示可点击状态
      cursor: pointer; // 更改鼠标指针为手型，提示用户该元素是可交互的

      &:hover { // 当鼠标悬停在删除按钮上时
        opacity: 0.8; // 减少不透明度到80%，提供视觉反馈，表明元素处于悬停状态
      }

      &.disabled { // 当删除按钮具有.disabled类时（即禁用状态）
        opacity: 0.6; // 进一步降低不透明度到60%，表示按钮不可用
        cursor: not-allowed; // 改变鼠标指针为禁止符号，明确传达按钮不可点击的状态
      }
    }
  }
}
