:root {
    /* Colors */
    --color-active: #31C3E6;
    --color-hover: #206AB9;
    --color-text: #fff;
    --color-text-tooltip: #0b3e74;

    --color-disabled: #F5F8FC;
    --color-disabled-hover: #e0e0e0;
    --color-text-disabled: #0b3e74;
    --color-text-disabled-hover: #0b3e74;

    /* Map France */
    --max-width: 800px;
    --max-height: 800px;

    /* Typography */
    --font-family: Arial, sans-serif;
    --font-size-base: 1.3rem;
    --font-size-small: 1.1rem;

    /* Tooltip */
    --tooltip-bg: #fff;
    --tooltip-radius: 6px;
    --tooltip-padding: 1rem 1.5rem;
    --tooltip-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px;
}

/* Tooltip */
#tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--tooltip-bg);
    color: var(--color-text-tooltip);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    font-size: var(--font-size-base);
    display: none;
    z-index: 9999;
    transform: translate(-50%, -100%);
    font-family: var(--font-family);
    box-shadow: var(--tooltip-shadow);
}
#tooltip .icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Map */
svg#france-map {
    max-width: var(--max-width);
    max-height: var(--max-height);
}

svg#france-map .region > a path, svg#france-map .region > a rect {
    fill: var(--color-active);
    transition: fill 0.2s ease-in-out;
}

svg#france-map .region a:hover {
    cursor: pointer;
}

svg#france-map .region a:hover > path {
    fill: var(--color-hover);
}

/* Built-in texts for not disabled regions */
svg#france-map .region g[transform] path, svg#france-map .region g[transform] rect {
    fill: var(--color-text);
}
svg#france-map .region:hover g[transform] path, svg#france-map .region:hover g[transform] rect {
    fill: var(--color-text);
}

/* Region disabled (0 stations) */
svg#france-map .region.disabled > a > path {
    fill: var(--color-disabled);
}
svg#france-map .region.disabled:hover> a {
    cursor: not-allowed;
}

svg#france-map .region.disabled:hover> a > path {
    fill: var(--color-disabled-hover);
}

/* Built-in texts for disabled regions */
svg#france-map .region.disabled g[transform] path, svg#france-map .region.disabled g[transform] rect {
    fill: var(--color-text-disabled);
}
svg#france-map .region.disabled:hover g[transform] path, svg#france-map .region.disabled:hover g[transform] rect {
    fill: var(--color-text-disabled-hover);
}

/* Tooltip content */
#france-map--region {
    font-weight: 600;
}
#france-map--station {
    padding-top: 0.5rem;
    font-size: var(--font-size-small);
    font-weight: 300;
    display: flex;
    align-items: center;
}