.sort-container {
  position: relative;
}

.sort-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, #e0e0e0 50%, transparent 90%);
  margin-top: 12px;
}

.sort-option {
  cursor: pointer;
  padding: 8px 0;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.sort-option.active {
  color: #333;
  font-weight: 500;
}

.sort-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #FF6B00;
  border-radius: 2px;
  transition: all 0.3s ease;
  width: 0;
  transform: translateX(0);
}

.sort-label {
  font-size: 14px;
  color: inherit;
  outline: none;
  box-shadow: none;
}

.sort-label:hover {
  color: #FF6B00;
}

.sort-arrow-icon {
  width: 12px;  /* 根据实际图标尺寸调整 */
  height: 12px; /* 根据实际图标尺寸调整 */
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5; /* 默认半透明 */
  transition: all 0.2s ease;
}

/* 激活状态下的图标样式 */
.sort-option.active .sort-arrow-icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(58%) sepia(90%) saturate(2155%) hue-rotate(353deg) brightness(101%) contrast(105%);
  /* 这个filter将图标变成橙色，类似#FF6B00颜色 */
}

/* 悬停状态 */
.sort-option:hover .sort-arrow-icon {
  opacity: 0.8;
}