@import "../variables";

//@import "~mapbox-gl/src/css/mapbox-gl.css";

.mapAPI-map {
    height: 30rem;
    margin-bottom: 1rem;
}

.mapboxgl-popup {
    font-size: .8rem;
    z-index: 4;
    line-height: 20px;
}

.mapboxgl-popup-content {
    min-width: 240px;
    min-height: 5rem;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);

    .mapboxgl-popup-close-button {
        font-size: 2rem;
        padding: .5rem;

        &:hover,
        &:focus {
            background: $primary;
            color: $white;
        }
    }
}

.mapboxgl-marker {
    width: 30px;
    height: 30px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    color: $primary;

    .marker-icon,
    .fas,
    .fab,
    .far {
        animation: pulse 0.8s linear infinite;
    }
}