/*-----------------------------------------------------------------------------*
 *  STORE LOCATOR
 *-----------------------------------------------------------------------------*
 *
 *  Responsive Google Maps Store locator build in Preact featuring interactive
 *  stores list, user geolocation, search box with autocomplete, custom map
 *  styles, custom markers and internationalization.
 *
 *  Forked and improved from https://github.com/microapps/store-locator
 *
 *  @author Luca Rosaldi
 *
 */

/**
 * @block        Store Locator
 * @description  The store locator wrapper.
 */
.store-locator {

  --sl-color: inherit;
  --sl-background: #000;
  --sl-background-selected: #111;
  --sl-border-color: #e6e6e6;
  --sl-button-color: #fd5b05;

  display: flex;
  flex-direction: column;

  position: relative;
  overflow: hidden;

  height: 100%;
}
  .store-locator * {
    box-sizing: border-box;
  }

/**
 * @element      Store Locator Store
 * @description  The wrapper for the store block.
 */
.store-locator_store {
  display: flex;
  align-items: stretch;
}
.store-locator_list .store-locator_store {
  position: relative;
  transition: all 0.2s ease;
}
.store-locator_list .store-locator_item.is-hidden {
  display: none;
}
.store-locator_list .store-locator_store.is-selected {
  background-color: var(--sl-background-selected);
}
.store-locator_map .store-locator_store {
}

/**
 * @element      Store Locator Store Text
 * @description  The container for the store text.
 */
.store-locator_store_text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  margin: 1rem;
}
.store-locator_list .store-locator_store_text {
  margin-left: 1.5rem;
}

/**
 * @element      Store Locator Store Thumbnail
 * @description  The container for the store thumbnail.
 */
.store-locator_store_thumbnail {
  flex: 0 0 auto;
  margin: 1rem;
  text-align: center;
}
  .store-locator_store_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
.store-locator_list .store-locator_store_thumbnail {
  width: 80px;
  height: 92px;
}
.store-locator_map .store-locator_store_thumbnail {
  margin: 0.5rem 0 0.5rem 0.5rem;
}

/**
 * @element      Store Locator Store Name
 * @description  The name of the store.
 */
.store-locator_store_name {
  margin: 0;
  font-size: 1em;
  font-weight: bold;
}

/**
 * @element      Store Locator Store Summary
 * @description  The summary of the store.
 */
.store-locator_store_summary {
  margin: 0.5rem 0 0;
  font-size: 0.875em;
}
.store-locator_list .store-locator_store_summary {
  margin-top: 0.25rem;
  opacity: 0.7;
}
.store-locator_map .store-locator_store_summary {
  display: none;
}

/**
 * @element      Store Locator Store Address
 * @description  The address of the store.
 */
.store-locator_store_address {
  margin: 0.5rem 0 0;
  font-size: 0.9375em;
  font-style: normal;
}
.store-locator_list .store-locator_store_address {
}
.store-locator_map .store-locator_store_address {
  display: none;
}

/**
 * @element      Store Locator Store description
 * @description  The description of the store.
 */
.store-locator_store_description {
  margin: 0.5rem 0 0;
  font-size: 0.875em;
}
.store-locator_list .store-locator_store_description {
  display: none;
}
.store-locator_map .store-locator_store_description {
}

/**
 * @element      Store Locator Store Distance
 * @description  The text which displays the distance of the store from the current location.
 */
.store-locator_store_distance {
  display: block;
  height: 1em;
  margin: 0.35rem 0 0;
  font-size: 0.875em;
  line-height: 1em;
  opacity: 0.75;
}
.store-locator.distance-is-hidden .store-locator_store_distance {
  display: none;
}

/**
 * @element      Store Locator Store Actions
 * @description  The available actions for the store.
 *
 * [1] remove click event on container to prevent conflicts with store selection
 */
.store-locator_store_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875em;
  margin-top: 1rem;

  pointer-events: none;  /* [1] */
}
.store-locator_list .store-locator_store_actions {
  display: none;
  margin-left: -0.25rem;
}
.store-locator_map .store-locator_store_actions {
  flex-direction: column;
  align-items: flex-start;
}

  /**
   * @element      Store Locator Store Actions
   * @description  The available actions for the store.
   *
   * [1] restore click events on links
   */
  .store-locator_store_actions a {
    display: inline-flex;
    position: relative;
    align-items: center;
    padding: 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;

    pointer-events: auto;  /* [1] */
  }
  .store-locator_store_actions a:hover {
    z-index: 2;
  }
  .store-locator_list .store-locator_store_actions a {
    white-space: nowrap;
  }
  .store-locator_list .store-locator_store_actions a::after {
    content: attr(title);
    position: absolute;
    top: 50%; left: 100%;
    transform: translateY( -50% );

    margin: 0 0.25em;
    padding: 0.25em 0.5em;

    white-space: nowrap;

    background-color: #fd5b05;
    background-color: var(--sl-button-color);
    color: #fff;
    color: var(--sl-background);

    border-radius: 4px;

    opacity: 0;
    transition: all 0.1s linear;

    pointer-events: none;
  }
  .store-locator_list .store-locator_store_actions a:hover::after {
    opacity: 1;
  }
  .store-locator_map .store-locator_store_actions a {
    padding-left: 0;
  }

  /**
   * @element      Store Locator Store Actions Icon
   * @description  The icon for the store action.
   */
  .store-locator_store_actions svg {
    width: 1.5em;
    height: 1.5em;

    color: #fd5b05;
    color: var(--sl-button-color);

    transition: all 0.15s ease;
  }

  /**
   * @element      Store Locator Store Actions Text
   * @description  The text for the store action.
   */
  .store-locator_store_actions span {
    margin-left: 0.25em;
  }
  .store-locator_list .store-locator_store_actions span {
    display: none;
  }

/**
 * @element      Store Locator Map
 * @description  The map wrapper.
 */
.store-locator_map {
  flex: 1;

  position: relative;
  z-index: 1;

  height: 100%;
  min-height: 300px;
}

  /**
   * @element      Store Locator Map Store
   * @description  Store inside the map infowindow.
   */
  .store-locator_map .store-locator_store {
    flex-direction: column;
    max-width: 300px;
  }
  .store-locator_map .store-locator_store.has-thumbnail {
  }

  /**
   * @element      Store Locator Map Store Text
   * @description  Text of store inside the map infowindow.
   */
  .store-locator_map .store-locator_store .store-locator_store_text {
    margin: 0.5rem 0 0.5rem 0.5rem;
  }

  .gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
  .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece {
    background-color: black;
  }

  .gm-style-iw {
    background-color: black !important;
  }

  .gm-style .gm-style-iw-t::after {
    background: black !important;
  }

/**
 * @element      Store Locator Nav
 * @description  The wrapper for the store navigation.
 */
.store-locator_nav {
  z-index: 2;

  width: 100%;
  min-height: 300px;

  background: #fff;
  background: var(--sl-background);
  color: inherit;
  color: var(--sl-color);

  box-shadow: 0 0 8px rgba( 0, 0, 0, 0.3 );
}

  /**
   * @element      Store Locator Nav Container
   * @description  The store navigation container.
   */
  .store-locator_nav_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

    /**
     * @element      Store Locator Nav Header
     * @description  The store navigation header.
     */
    .store-locator_nav_header {
      position: relative;
      z-index: 2;

      width: 100%;
      padding: 1rem 0.75rem;
      border-bottom: 1px solid var(--sl-border-color);
    }

    /**
     * @element      Store Locator Nav Search
     * @description  The search bar inside the store navigation.
     */
    .store-locator_nav_search {
      background-color: #222;
      display: flex;
      position: relative;
      z-index: 2;
      width: 100%;
    }

  /**
   * @element      Store Locator Search
   * @description  The search bar.
   */
  .store-locator_search {
    flex-grow: 1;
    position: relative;
  }

    /**
     * @element      Store Locator Search Input
     * @description  The input element inside the search bar.
     */
    .store-locator_search input {
      width: 100%;
      height: 3em;
      padding: 0 2.25rem 0 0.75rem;

      font-size: 1em;
      line-height: 3em;

      background: transparent;
      border: 0;
      outline: none;
      caret-color: #ddd;
      color: #fd5b05;
    }

    .store-locator_search input:focus {
      color: #ddd;
    }

    /* clears the 'X' from Internet Explorer */
    .store-locator_search input::-ms-clear {  display: none; width : 0; height: 0; }
    .store-locator_search input::-ms-reveal {  display: none; width : 0; height: 0; }

    /* clears the 'X' from Chrome */
    .store-locator_search input::-webkit-search-decoration,
    .store-locator_search input::-webkit-search-cancel-button,
    .store-locator_search input::-webkit-search-results-button,
    .store-locator_search input::-webkit-search-results-decoration { display: none; }


    /**
     * @element      Store Locator Search Label
     * @description  The label (icon) inside the search bar.
     */
    .store-locator_search svg {
      position: absolute;
      right: 0.25em;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 1.5em;
      height: 1.5em;
      opacity: 0.38;
      pointer-events: none;
    }

    /**
     * @element      Store Locator Search Hint
     * @description  The text below the search bar.
     */
    .store-locator_search_hint {
      width: 100%;
      margin: 1rem 0 0;
      font-size: 0.875em;
      opacity: 0.75;
    }

  .store-locator_nav_button {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    font-size: 1em;
    width: 3em;
    height: 3em;

    background: transparent;
    border: 0;
    color: inherit;

    appearance: none;
    cursor: pointer;

  }
  .store-locator.no-geolocation .store-locator_nav_button {
    display: none;
  }

    .store-locator_nav_button svg {
      width: 1.5em;
      height: 1.5em;
      opacity: 0.38;
      transition: all 0.15s ease;
    }
    .store-locator_nav_button:hover svg {
      color: #fd5b05;
      color: var(--sl-button-color);
      opacity: 1;
    }
    .store-locator_nav_button:before {
      content: "";
      position: absolute;
      top: 0.75em; bottom: 0.75em;
      left: 0.2em;
      width: 1px;

      background-color: #e6e6e6;
      background-color: var(--sl-border-color);
    }

  /**
   * @element      Store Locator Nav Empty
   * @description  Container for the text displayed where there are no results.
   */
  .store-locator_nav_empty {
    font-size: 1.25em;
    opacity: 0.5;
    padding: 1.5rem;
  }

  /**
   * @element      Store Locator Filters
   * @description  The filters wrapper.
   */
  .store-locator_filters {
    background-color: var(--sl-background);
    border-bottom: 1px solid var(--sl-border-color);
  }

    /**
     * @element      Store Locator Filters Header
     * @description  The filters header.
     */
    .store-locator_filters_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;

      background: var(--sl-background-selected);

      font-weight: bold;
      cursor: pointer;
    }

    /**
     * @element      Store Locator Filters Header SVG
     * @description  The filters header.
     */
    .store-locator_filters_header svg {
      width: 1em;
      height: 1em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2px;
    }

    /**
     * @element      Store Locator Filters Toggle
     * @description  The toggle button for hiding and showing the filters list.
     */
    .store-locator_filters_toggle {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    .store-locator_filters_toggle:checked ~ .store-locator_filters_header svg {
      transform: rotate(180deg);
    }
    .store-locator_filters_toggle:not(:checked) ~ .store-locator_filters_list {
      display: none;
    }

    /**
     * @element      Store Locator Filters List
     * @description  The filters list.
     */
    .store-locator_filters_list {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0.75rem;
      list-style: none;
    }

    /**
     * @element      Store Locator Filters Item
     * @description  The filters list item.
     */
    .store-locator_filters_item {
      padding: 0.25rem;
    }

  /**
   * @element      Store Locator List
   * @description  The list of all stores.
   */
  .store-locator_list {
    margin: 0;
    padding: 0;

    list-style: none;

    overflow-y: auto;

    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }
  .store-locator_list::-webkit-scrollbar {
    width: 6px;
  }
  .store-locator_list::-webkit-scrollbar-thumb {
    background: rgba( 0, 0, 0, 0.42 );
  }
  .store-locator_list::-webkit-scrollbar-track {
    background: rgba( 0, 0, 0, 0.12 );
  }

    /**
     * @element      Store Locator List Item
     * @description  Item inside the store navigator list.
     */
    .store-locator_list li {
      border-bottom: 1px solid var(--sl-border-color);
    }

@media (min-width: 750px) {

  /**
   * @block        Store Locator
   * @description  The store locator wrapper.
   *
   * [1] put map and navigation side by side
   */
  .store-locator {
    flex-direction: row;
  }

  /**
   * @element      Store Locator Nav
   * @description  The wrapper for the store navigation.
   *
   * [1] put the navigation on the left of the screen
   */
  .store-locator_nav {
    order: -1;
    max-width: 400px;
  }

  /**
   * @modifier     Store Locator Fullwidth Nav
   * @description  The wrapper for the store navigation when in full width mode.
   */
  .store-locator.is-fullwidth .store-locator_nav {
    position: absolute;
    top: 2rem; left: 2rem;
    bottom: 2rem; right: 2rem;
  }

    /**
     * @element      Store Locator Nav Container
     * @description  The store navigation container.
     */
    .store-locator_nav_container {
    }

}