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

@use "leaflet/dist/leaflet.css";

// temp fix until perm fix gets released --> https://github.com/Leaflet/Leaflet/pull/7259

.leaflet-container :focus {
  outline: -webkit-focus-ring-color auto thin !important; /* Fallback for some browsers that don't support `revert`. */
  /* Longhand properties:
  outline-color: -webkit-focus-ring-color !important;
  outline-style: auto !important;
  outline-width: thin !important;
  */
  outline: revert !important;
}

.leaflet-container a {
  color: var(--mf-c-bay-blue);
}

.leaflet-popup-content {
  margin: 0;

  &-wrapper {
    padding: 6px;
  }
}

.ma__location-listing__map  > a {
  font-size: $fonts-small;
  text-align: center;
  display: block;

  &:not(:focus) {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
}

.ma__leaflet-map {

  display: flex;
  flex-direction: column;

  &__link {

    a {
      text-decoration: none;
    }

    a:first-child:hover,
    a:first-child:focus {
      border-width: 3px;
      border-style: solid;
      transition: none;
      overflow: hidden;
      height: 400px;

      .ma__leaflet-map__map {
        margin-top: -2px;
        margin-left: -3px;
      }

      .ma__leaflet-map__directions-link {
        margin-left: -3px;
        width: auto;
      }
    }
  }

  &__map {
    height: 360px;
    z-index: 10;

    @media ($bp-x-small-min) {
      height: 500px;
    }

    // Override the style in the distribution.

    .leaflet-pane a.leaflet-popup-close-button {
      margin-top: 2px;
      width: 24px;
      height: 24px;
      font-size: 26px;
      color: var(--mf-c-bay-blue-40-tint);//<-- Change to $c-link after DP-32007 is released

      &:hover {
        color: var(--mf-c-font-link);
      }
    }
  }

  .ma__location-listing__map & {
    height: 100%;

    &__map {
      height: 100%;
    }
  }


  &__directions-link {
    width: 100%;
    background-color: var(--mf-c-primary-alt);
    padding: 0.2rem 0.9rem;
    font-size: $fonts-larger;

    span {
      color: var(--mf-c-font-inverse);
    }

    svg {
      margin-bottom: -1px;
    }
  }

  a:hover,
  a:first-child:focus .ma__leaflet-map__directions-link {

    span {
      text-decoration: underline;
    }
  }
}

// For the location banner specific

.ma__location-banner .ma__location-banner__map .ma__leaflet-map a .ma__leaflet-map__map {
  z-index: -1;
}