.md-usmaps {
position: relative;
width: 100%;
max-width: var(--md-usmaps-max-width, 900px);
margin-inline: auto;
}
.md-usmaps--full {
max-width: none;
} .md-usmaps__toolbar {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.md-usmaps__zoom {
display: inline-flex;
gap: 2px;
}
.md-usmaps__btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 32px;
height: 32px;
margin: 0;
padding: 0 10px;
border: 1px solid #c3c4c7;
border-radius: 6px;
background: #fff;
color: #1f2733;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.md-usmaps__btn:hover {
background: #f0f6fc;
}
.md-usmaps__btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--md-usmaps-names-hover, #113e6b);
} .md-usmaps__body {
display: flex;
gap: 16px;
align-items: flex-start;
}
.md-usmaps__stage {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
touch-action: pan-y;
}
.md-usmaps.is-zoomed .md-usmaps__stage {
cursor: grab;
touch-action: none;
}
.md-usmaps.is-panning .md-usmaps__stage {
cursor: grabbing;
}
.md-usmaps-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
} .md-usmaps-svg:focus {
outline: none;
} .md-usmaps__list {
flex: 0 0 220px;
align-self: stretch;
box-sizing: border-box;
min-height: 0;
overflow: hidden;
padding: 6px;
border: 1px solid #e2e4e7;
border-radius: 8px;
display: flex;
flex-direction: column;
}
.md-usmaps__list-search {
box-sizing: border-box;
width: 100%;
flex: 0 0 auto;
margin: 0 0 6px;
padding: 6px 8px;
border: 1px solid #c3c4c7;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
appearance: none;
-webkit-appearance: none;
}
.md-usmaps__list-search:focus-visible {
outline: none;
border-color: var(--md-usmaps-names-hover, #113e6b);
box-shadow: 0 0 0 1px var(--md-usmaps-names-hover, #113e6b);
}
.md-usmaps__list-items {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.md-usmaps.is-list-hidden .md-usmaps__list {
display: none;
}
.md-usmaps__list-item {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 6px 10px;
border: 0;
border-radius: 4px;
background: transparent;
color: inherit;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
letter-spacing: normal;
text-align: left;
text-transform: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.md-usmaps__list-item:hover {
background: #eef4fb;
}
.md-usmaps__list-item:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--md-usmaps-names-hover, #113e6b);
} .md-usmaps-area.is-highlight {
fill: var(--over, #8fbee8);
stroke: var(--md-usmaps-names-hover, #113e6b);
stroke-width: 2.5;
paint-order: stroke;
}
@media (max-width: 600px) {
.md-usmaps__body {
flex-direction: column;
}
.md-usmaps__list {
flex-basis: auto;
width: 100%;
max-height: 220px;
}
} .md-usmaps-area {
fill: var(--up, #e0f3ff);
stroke: var(--md-usmaps-border, #6b8b9e);
stroke-width: 1;
cursor: pointer;
transition: fill 0.15s ease;
}
.md-usmaps-area:hover,
.md-usmaps-area:focus-visible {
fill: var(--over, #8fbee8);
}
.md-usmaps-area:active,
.md-usmaps-area.is-down {
fill: var(--down, #477cb2);
}
.md-usmaps-area:focus {
outline: none;
}
.md-usmaps-area:focus-visible {
outline: 3px solid var(--md-usmaps-names-hover, #113e6b);
outline-offset: 2px;
}
.md-usmaps-area.is-disabled {
fill: var(--up, #e0f3ff);
opacity: 0.45;
cursor: default;
pointer-events: none;
} .md-usmaps-lakes path {
fill: var(--md-usmaps-lakes, #66ccff);
stroke: var(--md-usmaps-border, #6b8b9e);
stroke-width: 1;
} .md-usmaps-label {
fill: var(--md-usmaps-names, #3c3c3c);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600; text-anchor: middle;
dominant-baseline: central; pointer-events: auto;
cursor: pointer;
user-select: none;
transition: fill 0.15s ease;
}
.md-usmaps-label.is-active {
fill: var(--md-usmaps-names-hover, #113e6b);
} .md-usmaps--hide-names .md-usmaps-labels {
display: none;
}
.md-usmaps--hide-lakes .md-usmaps-lakes {
display: none;
}
.md-usmaps--hide-alaska [data-area="alaska"],
.md-usmaps--hide-alaska [data-area-label="alaska"] {
display: none;
}
.md-usmaps--hide-hawaii [data-area="hawaii"],
.md-usmaps--hide-hawaii [data-area-label="hawaii"] {
display: none;
}
.md-usmaps--hide-dc [data-area="washington-dc"],
.md-usmaps--hide-dc [data-area-label="washington-dc"] {
display: none;
} .md-usmaps-callouts {
display: none;
}
.md-usmaps--mask-callouts .md-usmaps-callouts {
display: block;
} .md-usmaps__tooltip {
position: fixed;
z-index: 9999;
max-width: 280px;
padding: 8px 12px;
border-radius: 6px;
background: #1f2733;
color: #fff;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
pointer-events: auto;
}
.md-usmaps__tooltip[hidden] {
display: none;
}
.md-usmaps__tooltip a {
color: #9ad0ff;
} .md-usmaps__tooltip > :first-child {
margin-top: 0;
}
.md-usmaps__tooltip > :last-child {
margin-bottom: 0;
}
.md-usmaps__tooltip p,
.md-usmaps__tooltip ul,
.md-usmaps__tooltip ol {
margin: 0.35em 0;
}
.md-usmaps__tooltip ul,
.md-usmaps__tooltip ol {
padding-left: 1.25em;
}
.md-usmaps__tooltip li {
margin: 0;
} .md-usmaps__fallback {
margin: 0;
padding-left: 1.2em;
} .md-usmaps-placeholder {
padding: 1.5em;
border: 1px dashed #c3c4c7;
border-radius: 6px;
text-align: center;
color: #50575e;
}
@media (prefers-reduced-motion: reduce) {
.md-usmaps-area,
.md-usmaps-label {
transition: none;
}
}