/* 自定义下拉菜单容器 */
.custom-select-wrapper {
  position: relative;
  font-family: inherit;
  min-width: 80px; /* 确保最小宽度 */
  margin-bottom: 8px; /* 匹配原生样式 */
  display: inline-block;
  vertical-align: middle;
}

.custom-select-wrapper.custom-select-open {
  z-index: 20000;
}

.custom-select-wrapper.custom-select-open .select-selected {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 提高优先级，强制隐藏原生 select */
#testEditor .custom-select-wrapper select,
.custom-select-wrapper select {
  display: none !important; 
}

/* 选中项显示区域 */
.select-selected {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 30px 0 10px; /* 右侧留出箭头空间 */
  height: 28px;
  line-height: 28px;
  color: #333;
  cursor: pointer;
  user-select: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
  font-size: 13.33px; /* 匹配 select 默认字体 */
}

/* 激活状态（打开下拉时） */
.select-selected.select-arrow-active {
  border-color: #6bb4ed;
}

/* 箭头图标 - 使用伪元素绘制 */
.select-selected:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -3px; /* 垂直居中微调 */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #2196F3; /* 蓝色三角形 */
  transform: rotate(0deg); 
  transition: transform 0.3s ease, border-top-color 0.3s ease; /* 增加颜色过渡 */
}

/* 箭头旋转动画 */
.select-selected.select-arrow-active:after {
  transform: rotate(180deg); /* 旋转180度 */
  border-top-color: #006400 !important; /* 深绿色 - 强制生效 */
}

/* 下拉列表容器 */
.select-items {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  border: 1px solid #cbd5e1;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  /* 初始隐藏状态 */
  display: none;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 显示下拉列表 */
.select-items.select-show {
  display: block;
}

/* 选项样式 */
.select-items div {
  color: #333;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13.33px;
  line-height: 1.4;
  border-bottom: 1px solid #f0f0f0;
}

.select-items div:last-child {
  border-bottom: none;
}

/* 选项悬停 */
.select-items div:hover {
  background-color: #f1f5f9;
  color: #265d97;
}

/* 选中项高亮 */
.same-as-selected {
  background-color: #e6f0fa;
  color: #265d97;
  font-weight: 500;
}

/* 禁用样式 */
.custom-select-wrapper.disabled .select-selected {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
  border-color: #ddd;
}
.custom-select-wrapper.disabled .select-selected:after {
  border-top-color: #ccc !important;
}

#testEditor #showBracketAndTab:checked ~ #showTabContainer {
  display: flex !important;
}

#testEditor #showBracketAndTab:not(:checked) ~ #showTabContainer {
  display: none !important;
}