.sl-map { --sl-map-land: var(--sl-teal, #00897b); --sl-map-hover: #00a695; --sl-map-active: var(--sl-orange, #f97316); --sl-map-water: var(--sl-teal-200, #b0dad6); --sl-map-line: #ffffff; display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 648px; margin-inline: auto; } .sl-map__canvas { position: relative; width: 100%; } .sl-map__svg { display: block; width: 100%; height: auto; overflow: visible; } .sl-map__water { fill: var(--sl-map-water); pointer-events: none; } .sl-map__province { fill: var(--sl-map-land); stroke: var(--sl-map-line); stroke-width: 1.2; cursor: pointer; outline: none; transition: fill .16s ease, filter .16s ease; } .sl-map__province:hover, .sl-map__province:focus-visible { fill: var(--sl-map-hover); } .sl-map__province:focus-visible { stroke: var(--sl-ink, #040404); stroke-width: 2; } .sl-map__province.is-active { fill: var(--sl-map-active); } .sl-map__province.has-data { filter: saturate(1.15); } @media (prefers-reduced-motion: reduce) { .sl-map__province { transition: none; } } .sl-map__tip { position: absolute; top: 0; left: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #fff; border-radius: var(--sl-r-sm, 12px); box-shadow: var(--sl-shadow-md, 0 8px 32px rgba(0,0,0,.04)), 0 2px 8px rgba(0, 0, 0, .12); pointer-events: none; white-space: nowrap; direction: rtl; text-align: right; transform: translate(-50%, -120%); margin-top: -8px; } .sl-map__tip strong { color: var(--sl-ink, #040404); font-size: 14px; font-weight: 700; line-height: 20px; } .sl-map__tip span { color: var(--sl-teal); font-size: 12px; line-height: 16px; } .sl-map__tip:empty, .sl-map__tip[hidden] { display: none; } .sl-map__panel { direction: rtl; padding: 16px; background: #fff; border: 1px solid var(--sl-border, #ededed); border-radius: var(--sl-r-md, 16px); } .sl-map__panel:empty { display: none; } .sl-map__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-end: 12px; border-block-end: 1px solid var(--sl-line, #f3f3f3); } .sl-map__panelname { margin: 0; font-size: 16px; font-weight: 700; line-height: 24px; } .sl-map__panelcount { flex: none; padding: 4px 12px; background: var(--sl-teal-soft, #e6f3f2); border-radius: var(--sl-r-pill, 1000px); color: var(--sl-teal); font-size: 12px; font-weight: 600; } .sl-map__panelnote { margin: 12px 0 0; color: var(--sl-muted, #828282); font-size: 12px; line-height: 20px; } .sl-map__panelbody { margin-block-start: 12px; } .sl-map__panelloading, .sl-map__panelempty { margin: 0; padding-block: 12px; color: var(--sl-muted, #828282); font-size: 13px; text-align: center; } .sl-map__list { display: flex; flex-direction: column; gap: 8px; } .sl-map__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--sl-r-sm, 12px); transition: background-color .16s ease; } .sl-map__item:hover { background: var(--sl-bg-soft, #f9fafc); } .sl-map__item img, .sl-map__itemph { flex: none; width: 40px; height: 40px; object-fit: cover; background: var(--sl-teal-soft, #e6f3f2); border-radius: 50%; } .sl-map__itemtext { display: flex; flex-direction: column; min-width: 0; } .sl-map__itemtext strong { color: var(--sl-ink, #040404); font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-map__itemtext small { color: var(--sl-muted, #828282); font-size: 12px; line-height: 16px; } .sl-map__more { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin-block-start: 12px; padding-inline: 16px; background: var(--sl-teal, #00897b); border-radius: var(--sl-r-pill, 1000px); color: #fff; font-size: 14px; font-weight: 600; } .sl-map__more:hover { background: var(--sl-teal-600, #00796b); color: #fff; } @media (min-width: 1024px) { .sl-map--panel-side { flex-direction: row-reverse; align-items: flex-start; max-width: 100% !important; } .sl-map--panel-side .sl-map__canvas { flex: 1 1 auto; max-width: 648px; } .sl-map--panel-side .sl-map__panel { flex: none; width: 312px; } } .sl-map--panel-below { flex-direction: column; } @media (max-width: 560px) { .sl-map__tip { font-size: 12px; padding: 6px 10px; } .sl-map__province { stroke-width: .8; } } .sl-map__labels { pointer-events: none; } .sl-map__label { fill: var(--sl-teal, #00897B); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .75; }