@use '../../colors';
@use '../../breakpoints';

.bz-map-mobile-popup {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: colors.$white;
    border: 4px solid colors.$blue-100;
    border-radius: 12px;
    padding: 16px;
    z-index: 9999;
    width: auto;

    .bz-map-popup__tag {
       position: relative;
       margin: 0;
       top: 0;
    }
    &--closed {
        border-color: colors.$pink-100;

        .bz-map-popup__tag {
            color: colors.$neutral-9;
        }
    }
    &__close {
        position: absolute;
        top: 10px;
        right: 15px;
        background: none;
        border: none;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        color: colors.$blue-100;
    }
}

@media (max-width: breakpoints.$tablet) {
    .bz-map-mobile-popup {
        display: block;
        .bz-map-popup {
            display: block !important;
        }
    }
}