/**
 * 店舗一覧アーカイブ：SVG地図スタイル
 * 
 * 前提：
 * ・.prefecture は県ごとのラッパー（g要素想定）
 * ・内部に path / polygon / rect などが入っている
 */


/* ----------------------------------------
 * 境界線（都道府県の境目）
 * ----------------------------------------
 * SVG側のクラス .boundary-line に対して白線を指定
 */
.geolonia-svg-map .boundary-line {
  stroke: #fff;
  stroke-width: 1;
}


/* ----------------------------------------
 * 初期状態（未選択）
 * ----------------------------------------
 * ・塗り：current系カラー
 * ・枠線：baseカラー
 * ・hover/selected用にトランジションを持たせる
 */
.prefecture {
  fill: var(--wp--preset--color--current-9);
  stroke: var(--wp--preset--color--base);
  transition: 0.2s;
}


/* ----------------------------------------
 * 有効状態（クリック可能な県）
 * ----------------------------------------
 * ・白背景にして「操作できる」ことを示す
 * ・fillだけアニメーション
 */
.prefecture.is-active {
  fill: #fff;
  transition: fill 0.25s;
}


/* ----------------------------------------
 * 選択状態（フィルターON）
 * ----------------------------------------
 * 注意：
 * ・.prefectureの「子要素」に対して色を当てている
 * ・SVG構造が g > path の場合に有効
 */
.prefecture.is-selected :is(path, polygon, rect, circle, ellipse) {
  fill: var(--wp--preset--color--primary);
}


/* ----------------------------------------
 * ホバー状態（未選択のみ）
 * ----------------------------------------
 * ・選択されていない県だけ hover 色を当てる
 * ・selected と競合しないよう :not を付けている
 */
.prefecture.group-hover:not(.is-selected) :is(path, polygon, rect, circle, ellipse) {
  fill: var(--wp--preset--color--primary);
}