<!-- 
 定义训练动作新增页面（xunji-dongzuo-xinzeng.vue），核心用于创建 / 新增自定义体能训练动作，位置在训记的动作右侧抽屉点击新增动作就是这个页面.
 支持训练部位、动作类型、目录分类、封面 / 视频等多维度配置，最终提交保存到后端接口，适配移动端多端（小程序 / APP/H5） 
 -->
<template>
  <view class="add-custom-exercise-page">
    <!-- 肌肉部位图 -->
    <view class="muscle-area" @click="openMusclePicker">
      <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260424/muscle_back_1777018976173.png"
        class="muscle-image-front" mode="aspectFill" />
    </view>
    <!-- 肌肉部位选择弹窗 - 美化版 -->
    <view v-if="showMusclePicker" class="popup-overlay" @click="closeAllPopups">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <view class="close-btn" @click="closeAllPopups">×</view>
          <view class="title">选择训练部位</view>
          <view class="confirm-btn" @click="confirmMuscleSelection">完成</view>
        </view>
        <view class="muscle-list-beautified">
          <view v-for="group in muscleGroups" :key="group.id" class="muscle-item-beautified">
            <text class="muscle-name">{{ group.name }}</text>
            <!-- 主要部位按钮 -->
            <view class="selector-btn primary" :class="{ active: primaryMuscles.includes(group.id) }"
              @click.stop="togglePrimary(group.id)">
              <view class="selector-dot primary"></view>
              <text class="selector-label">主要</text>
            </view>
            <!-- 次要部位按钮 -->
            <view class="selector-btn secondary" :class="{ active: secondaryMuscles.includes(group.id) }"
              @click.stop="toggleSecondary(group.id)">
              <view class="selector-dot secondary"></view>
              <text class="selector-label">次要</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 动作名称 -->
      <view class="form-item">
        <view class="label">动作名称</view>
        <view class="input-group">
          <input v-model="exerciseName" class="input-field" placeholder="点击此处填写动作名称"
            placeholder-class="input-placeholder" />
          <view class="icon-wrapper">
            <image
              src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
              class="edit-icon" mode="aspectFill" />
          </view>
        </view>
        <view class="cover-btn" @click.stop="openCoverSelector">
          <image :src="coverImagePath" class="cover-icon" mode="aspectFill" />
          <text class="btn-text">更换封面</text>
        </view>
      </view>
      <!--  新增：训练部位 -->
      <view class="form-item">
        <view class="label">训练部位</view>
        <view class="value-wrapper">
          <text class="value">{{ selectedMusclesDisplay }}</text>
        </view>
      </view>

      <!-- 动作类型 -->
      <view class="form-item" @click="openActionTypePicker">
        <view class="label">动作类型</view>
        <view class="value-wrapper">
          <text class="value">{{ actionType || '请选择' }}</text>
          <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
            class="arrow-icon" mode="aspectFill" />
        </view>
      </view>

      <!-- 目录管理 -->
      <view class="form-item" @click="openDirectoryPicker">
        <view class="label">目录管理</view>
        <view class="value-wrapper">
          <text class="value">{{ directoryName || '请选择' }}</text>
          <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
            class="arrow-icon" mode="aspectFill" />
        </view>
      </view>

      <!-- 动作视频 -->
      <view class="form-item">
        <view class="label">动作视频</view>
        <view class="value-wrapper">
          <text class="value">(非必填)</text>
        </view>
        <view class="upload-btn" @click="openVideoSelector">
          <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
            class="camera-icon" mode="aspectFill" />
          <text class="btn-text">图片/视频</text>
        </view>
      </view>

      <!-- 视频详解 -->
      <view class="form-item" @click="chooseTutorialVideo">
        <view class="label">视频详解</view>
        <view class="value-wrapper">
          <text class="value">{{ videoDetailName || '上传详解视频（非必填）' }}</text>
          <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
            class="arrow-icon" mode="aspectFill" />
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="save-button">
        <button class="btn-save" :disabled="!exerciseName.trim()" @click="saveExercise">保存</button>
      </view>
    </view>

    <!-- 动作类型选择弹窗 -->
    <view v-if="showActionTypePicker" class="popup-overlay" @click="closeAllPopups">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <view class="close-btn" @click="closeAllPopups">×</view>
          <view class="title">选择动作类型</view>
          <view class="confirm-btn" @click="confirmActionType">确定</view>
        </view>
        <picker-view :value="[actionTypeIndex]" @change="onActionTypeChange" class="picker-view">
          <picker-view-column>
            <view class="picker-item" v-for="item in actionTypeOptions" :key="item">{{
              item.name
            }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>

    <!-- 目录管理弹窗 -->
    <view v-if="showDirectoryPicker" class="popup-overlay" @click="closeAllPopups">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <view class="close-btn" @click="closeAllPopups">×</view>
          <view class="title">目录管理</view>
          <view class="confirm-btn" @click="confirmDirectory">确定</view>
        </view>
        <view class="double-picker">
          <picker-view :value="[bodyPartIndex]" @change="onBodyPartChange" class="picker-view half">
            <picker-view-column>
              <view class="picker-item" v-for="item in bodyPartOptions" :key="item">{{
                item.name
              }}</view>
            </picker-view-column>
          </picker-view>
          <picker-view :value="[equipmentIndex]" @change="onEquipmentChange" class="picker-view half">
            <picker-view-column>
              <view class="picker-item" v-for="item in equipmentOptions" :key="item">{{
                item.name
              }}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import ExercisesApi from '@/sheep/api/motion/exercises';
import LeftmotionApi from '@/sheep/api/motion/equipments';
import EquipmentListApi from '@/sheep/api/motion/motionequipments';
import FileApi from '@/sheep/api/infra/file';
// 表单数据
const exerciseName = ref('');
const actionType = ref();
const directoryName = ref();
const selectedMusclesDisplay = ref('未选择');

// 选中索引
const actionTypeIndex = ref(0);
const bodyPartIndex = ref(0);
const equipmentIndex = ref(0);

// 模拟接口数据（静态）
// const actionTypeOptions = [
//   { label: '次数类', value: 1 },
//   { label: '时间类', value: 2 },
//   { label: '距离类', value: 3 },
// ];
// 这是后端固定写死的，不要改
const actionTypeOptions = ref([
  { id: 0, name: '无氧运动' },
  { id: 1, name: '有氧运动' },
  { id: 2, name: '记次训练' },
  { id: 3, name: '计时训练' },
  { id: 4, name: '自重加重' },
  { id: 5, name: '自重减重' },
  { id: 6, name: '间歇训练' },
])
// // 加载动作分类（类型）
// const loadexercisesGroups = async () => {
//   try {
//     const res = await ExercisesApi.getAllMotionCategories();
//     actionTypeOptions.value = res.data;
//     console.log('加载动作分类', actionTypeOptions.value)
//   } catch (err) {
//     console.error('加载部位失败', err);
//   }
// };
// 肌肉部位列表（从接口获取）
const muscleGroups = ref([]);
// 加载肌肉部位
const loadMuscleGroups = async () => {
  try {
    const res = await ExercisesApi.getMotionPartPage();
    muscleGroups.value = res.data;
    console.log('加载部位分类：', muscleGroups.value)
  } catch (err) {
    console.error('加载部位失败', err);
  }
};

// 主要和次要部位（存储 ID 数组）
const primaryMuscles = ref([]); // 主要部位 ID 列表
const secondaryMuscles = ref([]); // 次要部位 ID 列表

// 弹窗控制
const showMusclePicker = ref(false);

// 部位分类
const bodyPartOptions = ref([]);
const loadbodyPartOptions = async () => {
  const res = await LeftmotionApi.getAllCategories();
  bodyPartOptions.value = res.data;
};

// 用具分类
const equipmentOptions = ref([]);
const loadequipmentOptions = async () => {
  const res = await EquipmentListApi.Getallequipments();
  equipmentOptions.value = res.data;
};

// 弹窗状态
const showActionTypePicker = ref(false);
const showDirectoryPicker = ref(false);
const showCoverSelector = ref(false);
const showVideoSelector = ref(false);

// 弹窗控制
const openActionTypePicker = () => {
  showActionTypePicker.value = true;
};
const openDirectoryPicker = () => {
  showDirectoryPicker.value = true;
};

// 封面图片路径
const coverImagePath = ref('https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png');
// 视频路径（可选）
const videoFilePath = ref('');
// ✅ 新增：标记是否上传成功（用于判断）
const coverUploaded = ref(false);
const videoUploaded = ref(false);
// 视频详解
const urlTutorial = ref('');
const videoDetailName = ref('');

// ==================== 视频详解（上传组件）====================
const chooseTutorialVideo = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['video'],  // 只允许选视频
    success: async (res) => {
      const file = res.tempFiles[0];
      const result = await FileApi.uploadFile(file.tempFilePath);
      urlTutorial.value = result.data;
      videoDetailName.value = '已选择详解视频';
      uni.showToast({ title: '选择成功', icon: 'success' });
    },
    fail: () => {
      uni.showToast({ title: '选择失败', icon: 'none' });
    }
  })
};
// 打开视频/图片选择器 + 上传成功判断  这里上传的是3D的那个字段
const openVideoSelector = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image', 'video'],
    success: async (res) => {
      const file = res.tempFiles[0];
      // 上传到服务器
      const result = await FileApi.uploadFile(file.tempFilePath);
      videoFilePath.value = result.data;
      videoUploaded.value = true; //  标记视频上传成功
      uni.showToast({
        title: file.fileType === 'video' ? '视频选择成功' : '图片选择成功',
        icon: "success"
      });
    },
    fail: () => {
      videoUploaded.value = false; // ❌ 选择失败
      uni.showToast({ title: "选择失败", icon: "none" });
    }
  })
};

// 封面选择 + 真实上传
const openCoverSelector = () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      const path = res.tempFilePaths[0];
      uni.showLoading({ title: "上传中..." });
      // 封面上传
      try {
        const result = await FileApi.uploadFile(path);
        coverImagePath.value = result.data;
        coverUploaded.value = true;
        uni.showToast({
          title: "封面上传成功",
          icon: "success"
        });
      } catch (err) {
        uni.showToast({
          title: "上传失败",
          icon: "none"
        });
      } finally {
        uni.hideLoading();
      }
    },
    fail: () => {
      coverUploaded.value = false;
      uni.showToast({
        title: "封面选择失败",
        icon: "none"
      });
    }
  });
};

const closeAllPopups = () => {
  showActionTypePicker.value = false;
  showDirectoryPicker.value = false;
  showCoverSelector.value = false;
  showVideoSelector.value = false;
  showMusclePicker.value = false;
  // showVideoDetailPicker.value = false;
};

// 动作类型
const onActionTypeChange = (e) => {
  actionTypeIndex.value = e.detail.value[0];
};
// 动作分类列表
const confirmActionType = () => {
  const actionstype = actionTypeOptions.value[actionTypeIndex.value];
  actionType.value = `${actionstype.name}`;
  closeAllPopups();
};

// 目录管理
const onBodyPartChange = (e) => {
  bodyPartIndex.value = e.detail.value[0];
};
const onEquipmentChange = (e) => {
  equipmentIndex.value = e.detail.value[0];
};
const confirmDirectory = () => {
  const selectedBodyPart = bodyPartOptions.value[bodyPartIndex.value];
  const selectedEquipment = equipmentOptions.value[equipmentIndex.value];
  directoryName.value = ` ${selectedBodyPart.name}( ${selectedEquipment.name})`;
  closeAllPopups();
};


// =================================保存动作====================
const saveExercise = async () => {
  if (!exerciseName.value.trim()) {
    uni.showToast({ title: '请输入动作名称', icon: 'none' });
    return;
  }

  // 获取 categoryId 和 equipmentId
  const selectedBodyPart = bodyPartOptions.value[bodyPartIndex.value];
  const selectedEquipment = equipmentOptions.value[equipmentIndex.value];
  if (!selectedBodyPart || !selectedEquipment) {
    uni.showToast({ title: '请选择目录分类', icon: 'none' });
    return;
  }

  // 动作类型映射：label -> value
  const selectedActionType = actionTypeOptions.value[actionTypeIndex.value];
  if (!selectedActionType) {
    uni.showToast({ title: '请选择动作类型', icon: 'none' });
    return;
  }
  // 提示选择封面
  if (!coverUploaded.value) {
    uni.showToast({ title: '请选择封面', icon: 'none' });
    return;
  }

  // 视频非必填，所以不强制，但可以提示
  if (videoFilePath.value && !videoUploaded.value) {
    uni.showToast({ title: '视频未选择成功', icon: 'none' });
    return;
  }
  // 构建请求参数
  const payload = {
    name: exerciseName.value.trim(),
    categoryId: selectedBodyPart.id, // 注意：必须是 id，不是 name
    equipmentId: selectedEquipment.id, // 同上
    exerciseType: selectedActionType.id, // 这里传数字 1/2/3
    primaryMuscles: JSON.stringify(primaryMuscles.value), //后端要求改json格式
    secondaryMuscles: JSON.stringify(secondaryMuscles.value),
    urlImage: coverImagePath.value, //  封面地址
    // url3dAnimation: videoFilePath.value,  // 3D动作视频讲解？？？这里是真人实拍视频
    urlRealPerson: videoFilePath.value,      //真人实拍视频
    urlTutorial: urlTutorial.value, // 详解视频
  };
  console.log('【发送的 payload】', payload);

  try {
    const res = await ExercisesApi.createExercise(payload);
    console.log('【接口返回】', res);
    if (res.code === 0) {
      uni.showToast({ title: '保存成功', icon: 'success' });
      // 可选：返回上一页或清空表单
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    } else {
      uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
    }
  } catch (error) {
    console.error('创建动作失败:', error);
    uni.showToast({ title: '网络错误，请重试', icon: 'none' });
  }
};

const openMusclePicker = () => {
  showMusclePicker.value = true;
};

const togglePrimary = (id) => {
  if (primaryMuscles.value.includes(id)) {
    primaryMuscles.value = primaryMuscles.value.filter((i) => i !== id);
  } else {
    primaryMuscles.value.push(id);
    // 自动取消次要
    secondaryMuscles.value = secondaryMuscles.value.filter((i) => i !== id);
  }
};

const toggleSecondary = (id) => {
  if (secondaryMuscles.value.includes(id)) {
    secondaryMuscles.value = secondaryMuscles.value.filter((i) => i !== id);
  } else {
    secondaryMuscles.value.push(id);
    // 自动取消主要
    primaryMuscles.value = primaryMuscles.value.filter((i) => i !== id);
  }
};

const confirmMuscleSelection = () => {
  // 构建显示文本，例如：“胸部(主), 背部(次)”
  const primaryNames = primaryMuscles.value
    .map((id) => muscleGroups.value.find((g) => g.id === id)?.name || '')
    .filter(Boolean);
  const secondaryNames = secondaryMuscles.value
    .map((id) => muscleGroups.value.find((g) => g.id === id)?.name || '')
    .filter(Boolean);

  let displayText = '';
  if (primaryNames.length) {
    displayText += primaryNames.join('、') + '(主)';
  }
  if (secondaryNames.length) {
    if (displayText) displayText += ', ';
    displayText += secondaryNames.join('、') + '(次)';
  }

  // 可以存到一个新字段，比如 selectedMusclesDisplay
  selectedMusclesDisplay.value = displayText || '未选择';

  closeAllPopups();
};

onMounted(() => {
  loadbodyPartOptions();
  loadequipmentOptions();
  loadMuscleGroups();
  // loadexercisesGroups();
});
</script>


<style scoped>
.add-custom-exercise-page {
  background-color: #1a1a1a;
  min-height: 100vh;
  padding: 20rpx;
  color: white;
}

/* 肌肉部位图 */

.muscle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40rpx;
}

/* 肌肉部位图容器 - 占满红色框，无多余内边距 */
.muscle-area {
  background: #1a1a1a;
  border-radius: 20rpx;
  /* 移除原有padding，让容器完全贴合红色框 */
  padding: 0;
  margin: 20rpx;
  position: relative;
  /* 固定容器高度，适配移动端，可根据需求调整 */
  height: 500rpx;
  overflow: hidden;
}

/* 肌肉图样式 - 100%占满容器，保持比例不拉伸 */
.muscle-image-front {
  width: 100%;
  height: 100%;
  /* aspectFill：保持比例，裁剪超出部分，完美占满容器 */
  /* 若要完整显示图片，改为 mode="aspectFit"，同时调整容器高度 */
  object-fit: cover;
  opacity: 1;
  /* 移除原有半透明，清晰显示 */
}

.muscle-image-back {
  transform: rotateY(180deg);
}

.legend {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #ccc;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 20rpx;
}

.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.primary {
  background-color: #ff9900;
}

.secondary {
  background-color: #66ccff;
}

/* 表单区域 */
.form-section {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  margin-top: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx 30rpx 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input-group {
  display: flex;
  align-items: center;
  position: relative;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.input-placeholder {
  color: #999;
}

.icon-wrapper {
  width: 40rpx;
  height: 40rpx;
  margin-left: 10rpx;
}

.edit-icon {
  width: 24rpx;
  height: 24rpx;
}

.cover-btn {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  padding: 10rpx;
}

.cover-icon {
  width: 40rpx;
  height: 40rpx;
}

.btn-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 5rpx;
}

.value-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
}

.value {
  color: #28c76f;
  font-weight: bold;
}

.arrow-icon {
  width: 20rpx;
  height: 20rpx;
  transform: rotate(90deg);
}

.upload-btn {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  padding: 10rpx;
}

.camera-icon {
  width: 40rpx;
  height: 40rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 5rpx;
}

.play-icon {
  width: 30rpx;
  height: 30rpx;
}

.save-button {
  margin: 40rpx 30rpx 0;
}

.btn-save {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(90deg, #ff9900, #ff6600);
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  outline: none;
}

/* 弹窗通用样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.popup-content {
  width: 100%;
  background: white;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 70vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.close-btn {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 0;
}

.confirm-btn {
  width: 80rpx;
  height: 40rpx;
  line-height: 40rpx;
  background-color: #ff9900;
  color: white;
  border-radius: 20rpx;
  text-align: center;
  font-size: 28rpx;
}

.picker-view {
  height: 200rpx;
  width: 100%;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
  height: 100%;
}

.double-picker {
  display: flex;
}

.double-picker .picker-view.half {
  width: 50%;
}

/* 封面预览 */
.cover-preview {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
}

.cover-image {
  width: 200rpx;
  height: 200rpx;
}

/* 上传区域 */
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.upload-icon {
  width: 60rpx;
  height: 60rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* === 美化后的肌肉选择列表 === */
.muscle-list-beautified {
  padding: 20rpx 32rpx;
}

.muscle-item-beautified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.muscle-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}

.selector-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  border-radius: 50rpx;
  background-color: #f8f8f8;
  transition: all 0.2s ease;
  min-width: 120rpx;
  text-align: center;
}

.selector-btn.primary {
  border: 2rpx solid #ffcc99;
}

.selector-btn.primary.active {
  background-color: #fff3e6;
  border-color: #ff9900;
  box-shadow: 0 4rpx 12rpx rgba(255, 153, 0, 0.2);
}

.selector-btn.secondary {
  border: 2rpx solid #cce6ff;
}

.selector-btn.secondary.active {
  background-color: #e6f7ff;
  border-color: #66ccff;
  box-shadow: 0 4rpx 12rpx rgba(102, 204, 255, 0.2);
}

.selector-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.selector-dot.primary {
  background-color: #ff9900;
}

.selector-dot.secondary {
  background-color: #66ccff;
}

.selector-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.selector-btn.primary.active .selector-label,
.selector-btn.secondary.active .selector-label {
  color: #333;
  font-weight: bold;
}
</style>