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

.bz-map-popup {
    //padding: 16px;
    background-color: colors.$white;
    //border: 4px solid colors.$blue-100;
    //border-radius: 4px;
    width: 280px;
    font-family: 'Gotham';
    
    &__tag {    
        position: absolute;
        top: 11px;
        font-size: 16px;
        font-weight: 900;
        color: colors.$blue-100;
    }
    
    &__name {
        font-size: 20px;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    &__title {
        font-size: 14px;
        font-weight: 700;
    }
    
    &__desc {
        font-size: 14px;
    }

    &__link {
        font-weight: 500;
        text-decoration-line: underline;
        color: colors.$pink-100;
    }

    &--closed {
        .bz-map-popup__tag {
            color: colors.$neutral-9;
        }
    }
}

@media (max-width: breakpoints.$tablet) {

    
    .bz-map-popup {
        display: none;
    }
}