@import '../_variables';
@import '../_animations';

//@import "~mapbox-gl/src/css/mapbox-gl.css";
$map-height: 30rem !default;

$map-marker-color: $primary !default;
$map-marker-size: 30px !default;

$map-popup-font-size: 0.8rem !default;
$map-popup-width: 16rem !default;
$map-popup-height: 7rem !default;
$map-popup-bg: $white !default;
$map-popup-color: $body-color !default;

.mapAPI-map {
    height: $map-height;
    margin-bottom: $grid-gutter-element-height;
}

.mapboxgl {
    &-popup {
        width: $map-popup-width;
        height: $map-popup-height;
        font-size: $map-popup-font-size;
        line-height: 1.2em;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        pointer-events: none;
        z-index: 4;
    }

    &-popup-anchor-bottom,
    &-popup-anchor-bottom-left,
    &-popup-anchor-bottom-right {
        flex-direction: column-reverse;
    }

    &-popup-content {
        min-width: $map-popup-width;
        background: $map-popup-bg;
        color: $map-popup-color;
        position: relative;
        pointer-events: auto;
        padding: 0.8rem;
        border-radius: 0.25rem;
        min-height: 5rem;
        box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);
    }

    &-popup-close-button {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 2rem;
        padding: 0.5rem;
        border-top-right-radius: 0.25rem;
        z-index: 2;

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

    &-popup-tip {
        width: 0;
        height: 0;
        border: 0.8rem solid transparent;
        z-index: 1;
    }

    &-popup-anchor-bottom &-popup-tip {
        border-top-color: $map-popup-bg;
        align-self: center;
        border-bottom: none;
    }

    &-marker {
        width: $map-marker-size;
        height: $map-marker-size;
        font-size: $map-marker-size;
        line-height: 1em;
        color: $map-marker-color;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;

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

    &-cluster {
        background: $info;
        color: color-yiq($info);
        border-radius: 100%;
        font-weight: bold;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        animation: pulse 0.8s linear infinite;

        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 140%;
            height: 140%;

            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            background: $info;
            opacity: 0.2;
            border-radius: 100%;
            z-index: -1;
        }

        &::after {
            width: 180%;
            height: 180%;
        }
    }
}