.ob-block-map {
    --ob-block-map--container-width                    : 1200px;
    --ob-block-map--title-font-size                    : 2rem;
    --ob-block-map--title-font-weight                  : 700;
    --ob-block-map--title-color                        : #000;
    --ob-block-map--title-text-align                   : center;
    --ob-block-map--title-margin-block                 : 1rem;
    --ob-block-map--gap                                : 1rem;
    --ob-block-map--map-flex-basis                     : 80%;
    --ob-block-map--list-flex-basis                    : calc( 100% - var(--ob-block-map--map-flex-basis) );
    --ob-block-map--list-flex-grow                     : 1;
    --ob-block-map--point--transition                  : opacity 0.5s ease-in-out;
    --ob-block-map--point-list--gap                    : 20px;
    --ob-block-map--point-list--padding-inline         : 20px;
    --ob-block-map--card--inset                        : 50% auto auto 50%;
    --ob-block-map--card--transform                    : translate( -50%, -50% );
    --ob-block-map--card--transition                   : opacity 0.3s ease-in-out;
    --ob-block-map--card--max-width                    : 420px;
    --ob-block-map--card--background                   : white;
    --ob-block-map--card--padding                      : 1em;
    --ob-block-map--card--border-radius                : 0px;
    --ob-block-map--card-close--inset                  : 10px 10px auto auto;
    --ob-block-map--card-close--padding                : 10px;
    --ob-block-map--card-close--background             : white;
    --ob-block-map--card-close--width                  : 40px;
    --ob-block-map--card-close--height                 : 40px;
    --ob-block-map--card-close--border-radius          : 0;
    --ob-block-map--pagination--margin-block           : 20px;
    --ob-block-map--pagination-page--active-background : #ccc;
}

.ob-block-map__container {
    max-width     : var( --ob-block-map--container-width, 1200px );
    margin-inline : auto;
}

.ob-block-map__container--full {
    max-width     : 100%;
    width         : 100%;
    margin-inline : 0;
}

.ob-block-map__title {
    font-size    : var( --ob-block-map--title-font-size, 2rem );
    font-weight  : var( --ob-block-map--title-font-weight, 700 );
    color        : var( --ob-block-map--title-color, #000 );
    text-align   : var( --ob-block-map--title-text-align, center );
    margin-block : var( --ob-block-map--title-margin-block, 1rem );
}

.ob-block-map__panel {
    display : flex;
    gap     : var( --ob-block-map--gap, 1rem );
}

.ob-block-map__map {
    flex-basis : var( --ob-block-map--map-flex-basis, 80% );
    position   : relative;
}

.ob-block-map__list {
    flex-basis : var( --ob-block-map--list-flex-basis, calc( 100% - var(--ob-block-map--map-flex-basis) ) );
    flex-grow  : var( --ob-block-map--list-flex-grow, 1 );
}

.ob-block-map__list .is-hidden {
    display: none !important;
}

.ob-block-map__point {
    position       : absolute;
    cursor         : pointer;
    transition     : var( --ob-block-map--point--transition, opacity 0.5s ease-in-out );
    opacity        : 0;
    pointer-events : none;
}

.ob-block-map__point.is-active {
    opacity        : 1;
    pointer-events : all;
}

.ob-block-map__point-list {
    display        : flex;
    flex-direction : column;
    gap            : var( --ob-block-map--point-list--gap, 20px );
    list-style     : none;
    margin         : 20px 0;
    padding-inline : var( --ob-block-map--point-list--padding-inline, 20px );
}

.ob-block-map__list-point.is-hidden,
.ob-block-map__list-point.is-hidden-by-pagination {
    display: none !important;
}

.ob-block-map__card_list {
    position : absolute;
    inset    : 0;
}

.ob-block-map__card {
    position       : absolute;
    opacity        : 0;
    z-index        : 2;
    pointer-events : none;
    inset          : var( --ob-block-map--card--inset, 50% auto auto 50% );
    transform      : var( --ob-block-map--card--transform, translate( -50%, -50% ) );
    transition     : var( --ob-block-map--card--transition, opacity 0.3s ease-in-out );
    width          : 100%;
    max-width      : var( --ob-block-map--card--max-width, 420px );
    max-height     : var( --ob-block-map--card--max-height );
    background     : var( --ob-block-map--card--background, white );
    padding        : var( --ob-block-map--card--padding, 1em );
    border-radius  : var( --ob-block-map--card--border-radius, 0px );
}

.ob-block-map__card.is-active {
    opacity        : 1;
    pointer-events : auto;
    z-index        : 2;
}

.ob-block-map__card__close {
    position      : absolute;
    inset         : var( --ob-block-map--card-close--inset, 10px 10px auto auto );
    padding       : var( --ob-block-map--card-close--padding, 10px );
    background    : var( --ob-block-map--card-close--background, white ) url(./images/close.svg) 50% 50% no-repeat;
    width         : var( --ob-block-map--card-close--width, 40px );
    height        : var( --ob-block-map--card-close--height, 40px );
    border-radius : var( --ob-block-map--card-close--border-radius, 0 );
    appearance    : none;
    border        : none;
    cursor        : pointer;
    overflow      : hidden;
    text-indent   : -1000em;
}

.ob-block-map__pagination {
    margin-block : var( --ob-block-map--pagination--margin-block, 20px );
    display      : flex;
    gap          : 5px;
}

.ob-block-map__pagination-page {
    padding: 5px;
}

.ob-block-map__pagination-page.is-active {
    background: var( --ob-block-map--pagination-page--active-background, #ccc );
}

.ob-block-map--popup-over_list {
    .ob-block-map__card_list {
        pointer-events: none;
        .ob-block-map__card {
            transform: none;
            inset: 0;
            &.is-active {

            }
        }
    }
}