/**
 * 可搜索的分组下拉的样式。与 combo.js 成对。
 *
 * 上报页（style.css）和后台列表页（admin/admin.css）共用这一份 ——
 * 两边都引了 /tokens.css，所以这里的 var() 在哪边都解析得到。
 * 「改这个文件两个页面一起变」。
 *
 * 字号刻意用 inherit 而不是写死：上报页正文字号 15px、后台 14px，
 * 写死一个值就会有一边和同排的输入框对不齐。
 */

.combo {
  position: relative;
}

/* 右侧留出箭头的位置，和 select 的 padding-right 对齐 */
.combo-input {
  padding-right: 40px;
}

.combo-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: 0;
  color: var(--text-mute);
  background: none;
  border: 0;
  cursor: pointer;
}

.combo-toggle::before {
  content: '';
  width: 12px;
  height: 8px;
  background: currentColor;
  /* 和 select 背景里那个 data-uri 箭头同一个形状，改样式时两边一起改 */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 292px;
  padding: 4px 0;
  overflow-y: auto;
  /* 手机上滚到底不要把整页一起带着滚 */
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/*
 * 大类行。有子类时它是个「展开/收起」开关（.is-toggle），本身不是一个可选值，
 * 所以左边不给留缩进 —— 子项缩进 22px，一眼能看出层级。
 * 默认全部收起：一屏只有大类，点开才看子类。
 */
.combo-group {
  padding: 9px 12px 4px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.combo-group.is-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 11px 12px;
  font-size: inherit;
  color: var(--text);
  cursor: pointer;
}

.combo-group.is-toggle:hover,
.combo-group.is-toggle.is-active {
  color: var(--brand);
  background: var(--brand-soft);
}

/* 展开指示：收起时朝右，展开时转成朝下 */
.combo-group.is-toggle::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.combo-group.is-toggle.is-open::after {
  transform: rotate(45deg);
}

.combo-opt {
  padding: 11px 12px 11px 22px;
  font-size: inherit;
  cursor: pointer;
}

/* 没有子类的大类：不缩进，和有小标题的那几组在视觉上区分开 */
.combo-opt.is-leaf {
  padding-left: 12px;
}

.combo-opt:hover,
.combo-opt.is-active {
  color: var(--brand);
  background: var(--brand-soft);
}

.combo-opt[aria-selected='true'] {
  font-weight: 600;
  color: var(--brand);
}

/* 「全部」那一行：和选项之间有道细分隔线，免得被当成一个故障类型 */
.combo-opt.is-clear {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}

.combo-empty {
  padding: 16px 12px;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  text-align: center;
}