// MAP
.map-wrapper{
    margin-top: 1.5rem;

    @include mobile{
        overflow-x: auto;
    }
}

.map{ // svg element
    display: block;
    height: auto;
    width: 100%;

    @include mobile{
        min-width: $container-width; // for parent overflow-x auto
    }
}

.map__group{
    cursor: pointer;
    fill: $main;

    // 5 regions
    &:nth-of-type(1){
        fill: darken($main, 20%);
    }
    &:nth-of-type(2){
        fill: darken($main, 10%);
    }
    &:nth-of-type(3){
        fill: $main;
    }
    &:nth-of-type(4){
        fill: lighten($main, 10%);
    }
    &:nth-of-type(5){
        fill: lighten($main, 20%);
    }

    @include desktop{
        @include transition(fill);

        &:hover{
            fill: $secondary;
        }
    }
}
.map__group--active{
    fill: $secondary !important;
}

.map__path{
    fill-opacity: 1;
    stroke: black;
    stroke-opacity: 1;
    stroke-width: 1;
}

.map__pin{
    @include block-selection;
    pointer-events: none;
    fill: white;
}

.map__text{
    @include block-selection;
    pointer-events: none;
    font-size: 0.625rem;
    font-weight: 700;
    fill: white;
}
.map__text--large{
    font-family: $font-family--heading;
    font-size: 1rem;
}