@import "../../css/sass/variables"
@import "../../css/sass/mixins"
@import "../../css/sass/media"

$map-listing-no-picture-orientation: 'landscape' !default

/**
 * TMP flex classes
 * @todo - remove once they became available globally
 */
.d-flex
    display: flex

.flex-row
    flex-direction: row

.flex-column
    flex-direction: column

.flex-fill
    flex: 1 1 auto
    min-width: 0

.align-self-center
    align-self: center

/** TMP flex classes end */

.map-listing

    &__picture
        position: relative
        width: 100%
        padding-bottom: 66%

        img
            position: absolute
            display: block
            width: 100%
            height: 100%
            object-fit: cover
            background: url('../../img/no-picture.png') center center no-repeat $color-box-bg

            @if $map-listing-no-picture-orientation == 'portrait'
                background-size: auto 100%

            +respond-to(pixel_ratio)
                background-image: url('../../img/@2x/no-picture.png')

                @if $map-listing-no-picture-orientation == 'portrait'
                    background-size: auto 100%
                @else
                    background-size: 100% auto

        &:not(.no-picture)
            img
                background: $color-box-bg

    &__info
        padding: 10px

    &__title
        padding-bottom: 5px
        font-size: $font-size-2 !important
        font-weight: $weight-regular

    &__price
        padding-bottom: 5px
        font-size: 1.250em
        font-weight: $weight-regular

    .favorite
        padding-#{$left}: 10px

.leaflet-custom-popup_listing
    .leaflet-popup-content
        width: 240px
        min-height: 250px

.listing-fit-contain
    .map-listing
        &__picture img
            object-fit: contain

/* Horizontal listing (Single location group) mode */
.leaflet-custom-popup_group-style
    .leaflet-popup-content
        +flex-box
        +flex-direction(column)
        width: 320px
        min-height: auto
        max-height: 440px
        overflow-y: auto

        +respond-to(mobile)
            max-height: 55vh

        header
            font-size: $font-size-4
            padding: 8px 10px 8px
            border-bottom: 2px $color-box-bg solid

    .map-listing
        +flex-direction(row)

        &:not(:last-child)
            border-bottom: 2px $color-box-bg solid

        &__picture
            padding-bottom: 0
            +flex(0, 0, 100px)

        &__title
            font-size: 1.000em !important

        &__info
            padding-top: 7px
            padding-bottom: 7px

    .content-placeholder
        +flex-direction(row)

        &-picture
            +flex(0, 0, 100px)
            height: 110px
