$location-listing--gutter-width: 30px;
$location-listin--map-min-width: 315px;

@use "00-base/configure" as *;

.ma__location-listing {
  position: relative;

  .ma-highlighted {
    z-index: 9999!important;
    filter: brightness(150%);

    &:not(.ma-transition) {
      transform-origin: center bottom;
      transition: transform 0.1s;
      transition-timing-function: ease-in-out;
    }
  }


  &__container {

    @include ma-container;
  }

  &__columns {
    position: relative;
  }

  &__columns &__container {
    flex-wrap: wrap;

    @media ($bp-x-large-min) {
      align-items: stretch;
      flex-wrap: nowrap;
      display: flex;
      margin-bottom: -60px;
    }
  }

  &__map {

    @media ($bp-x-large-min) {
      order: 2;
      width: $location-listin--map-min-width;
    }

    @media ($bp-page-width-min) {
      min-height: 100vh;
    }
  }

  &__sticky {
    height: 80vh;
    max-height: 500px;
    width: 100%;

    @media ($bp-x-large-min) {
      height: 100vh;
      max-height: none;
      position: absolute;
      right: 0;
      // 40px is from the padding in `ma-container` mixin.
      width: ($location-listin--map-min-width + 40px) !important;

      &[data-sticky='middle'] {
        position: fixed;
        top: 0;
      }

      &[data-sticky='bottom'] {
        bottom: 0;
      }
    }

    @media ($bp-x-large-max) {
      width: 100% !important;
    }

    @media ($bp-page-width-min) {
      // `100% of viewport` - `max-width of site`, then divided by 2,
      // gives what is on the L/R of the page, outside of the site container.
      // Then we add the min-width of the map container, and the padding
      // from the site container, to align with the content.
      width: calc((100vw - #{$max-width}) / 2 + (#{$location-listin--map-min-width} + #{$location-listing--gutter-width})) !important;
    }

    &::before {
      content: 'false';
      display: none;

      @media ($bp-large-min) {
        content: 'true'
      }
    }

    .ma__google-map,
    .ma__google-map__map {
      height: 100%;
    }
  }

  &__filters {
    background-color: var(--mf-c-bg-subtle);

    .ma__button-search {
      color: var(--mf-c-font-base);

      &:hover {
        background-color: var(--mf-c-font-base);
        border-color: var(--mf-c-font-base);
        color: var(--mf-c-font-inverse);
      }
    }
  }

  &__results {

    @media ($bp-x-large-min) {
      order: 1;
      padding-right: 30px;
      width: calc(100% - #{$location-listin--map-min-width});
    }
  }

  .ma__results-heading {
    margin-bottom: 0;
    padding-top: 40px;

    .ma__results-heading__title {
      display: block;
      float: none;
      text-align: center;

      @media ($bp-x-large-min) {
        text-align: left;
      }
    }
  }

  .ma__image-promo {
    margin-top: 0;
    padding-bottom: 30px;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;

    &:first-child {
      padding-top: 30px;
    }

    &__image {
      display: flex;
      flex-basis: 100%;
      margin: 0 0 0.5rem;
      width: 100%;

      @media ($bp-medium-min) {
        display: block;
        flex-basis: (100px + $location-listing--gutter-width);
        padding-right: $location-listing--gutter-width;
        width: (100px + $location-listing--gutter-width);
      }

      > a {
        display: block;
      }

      img {
        border-radius: 5px;

        @media ($bp-medium-max) {
          flex: 0 0 100px;
          margin-bottom: 0;
          margin-right: $location-listing--gutter-width;
          width: 100px;
        }

        @media ($bp-medium-min) {
          margin-bottom: 1rem;
        }
      }
    }

    &__tags {
      align-items: center;
      display: flex;
      flex: 1;
      float: none;

      @media ($bp-medium-min) {
        flex-wrap: wrap;
        justify-content: center;
      }

      > span {
        display: block;

        @media ($bp-medium-min) {
          margin-bottom: 10px;
        }

        &:first-child {
          margin-left: 0;
        }
      }
    }

    &__details {
      flex-basis: 100%;
      min-width: 0;

      @media ($bp-small-min) {
        flex-basis: 250px;
        padding-right: $location-listing--gutter-width;
      }

      > * {
        margin-bottom: 10px;
        margin-top: 0;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    &__location-subtitle {
      font-size: $fonts-medium;
    }

    &__location {
      font-size: $fonts-medium;
      font-weight: $fonts-normal;
      line-height: 1.5;
      padding-bottom: 0;

      // Location street address, and city-state-zip, should be wrapped
      // in separate <span> elements. This allows the transition between
      // block and inline styling for the address better than a <br>.

      > .street {
        display: block;
      }

      .ma__image-promo__directions {

        .ma__decorative-link {
          width: auto;

          a {
            width: auto;
            min-width: 5.5em;
            display: inline-block;
            padding-bottom: 0;
            padding-top: 0;
          }
        }
      }
    }

    .ma__image-promo__description {

      @media ($bp-medium-max) {
        display: none;
      }
    }

    &__link {
      font-size: $fonts-small;
    }

    &__contact {
      flex: 0 0 180px;

      @media ($bp-small-min) {
        flex-basis: 200px;
      }

      > div:not(:last-child) {
        margin-bottom: 0.5rem;
      }
    }

    &__label {
      font-weight: $fonts-normal;
    }

    &__contact-info {
      font-weight: $fonts-light;
    }

    &__phone {
      // Matches font-size defined on <body>.
      font-size: $fonts-large;

      svg {
        height: 25px;
        width: 25px;
      }
    }

    &__hours {
      display: flex;
      flex-wrap: wrap;
    }

    &__hours-item {
      flex: 1 1 100%;
    }
  }
}