digitransit-ui/app/component/map/map.scss

@import '~leaflet/dist/leaflet.css';

$small-map-height: 10rem;
$stop-thin-opacity: 0.2;
$top-bar-height: 64px;

div.map {
  max-height: 100%;
  position: relative;

  .leaflet-container .leaflet-control-attribution {
    height: 22px;
    opacity: 0.7;
    border-radius: 11px;
    background-color: #fff;
    margin: 10px;
    position: relative;
    top: -5px;
  }

  .leaflet-container .leaflet-popup-close-button {
    color: $primary-color;
    font-size: 25px;
    font-weight: 100;
    width: 32px;
    height: 32px;
    top: 12px;
    right: 4px;
    padding: 0;
  }

  .leaflet-container .leaflet-control-attribution a {
    height: 11px;
    font-family: $font-family;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.7px;
    text-align: right;
    color: #666;
    vertical-align: -3px;
  }
}

.below-map {
  overflow: auto;
}

.mobile {
  .map {
    div.leaflet-control-scale.leaflet-control {
      margin-right: 15px;
    }

    z-index: index($zindex, map-container);
  }

  .drawer-container {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scrollbar-width: none;
    height: 100%;
    position: absolute;
    width: 100%;

    .drawer-padding {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 90%;
      width: 0;
    }

    .drawer-content {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50vh;
      background: white;
      position: relative;
      z-index: index($zindex, mobile-drawer);

      &.fit-content {
        flex-basis: fit-content;
      }

      .drag-line {
        width: 48px;
        height: 4px;
        border-radius: 2px;
        background-color: #ddd;
        display: block;
        z-index: index($zindex, mobile-drawer-drag-line);
        margin: auto;
        position: relative;
        top: -5px;
      }

      .content-container {
        position: relative;
        top: -15px;
        box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.3);
        border-radius: 15px 15px 0 0;
        padding-top: 15px;
        background-color: white;
      }
    }
  }

  .overlay-mover {
    z-index: 401;
    position: absolute;
    width: 100%;
    bottom: 10%;
    transition: transform 0.1s;
  }

  .map .leaflet-bottom {
    bottom: 10%;
    transition: transform 0.1s;

    .leaflet-control-attribution {
      background-color: rgba(0, 0, 0, 0);
    }
  }

  .map-with-tracking-buttons {
    right: 15px;
    bottom: 45px;
  }

  .back-button {
    .icon-holder,
    .icon-holder:focus,
    .icon-holder:hover {
      padding: 0.55em 0.2em 0 0 !important;
      font-size: 16px;
      z-index: index($zindex, map-buttons);
      background: white;
      height: 2.5em;
      width: 2.5em;
      border-radius: 50%;
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
      left: 20px;
      top: 25px;

      button {
        outline: none;
      }

      .icon-container {
        height: inherit;
      }
    }
  }

  .location-popup-wrapper {
    .zone-icon-container {
      margin-bottom: 15px;
    }
  }
}

div.map.small {
  min-height: $small-map-height;
}

div.map.full {
  position: relative;
  min-height: $small-map-height;
  max-height: 100%;
  flex-grow: 1;
  flex-basis: 0;
}

div.below-map {
  height: calc(100% - #{$small-map-height});
}

div.leaflet-bottom.leaflet-right div.leaflet-control-zoom {
  width: 36px;
  height: 73px;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 30px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  &.leaflet-bar {
    border: none;
  }

  .icon {
    font-size: 18px;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 36px;
    height: 36px;
    line-height: 18px;
    font-size: 18px;
    color: $primary-color;
  }
}

.map .leaflet-bottom {
  z-index: $leaflet-overlay;
  bottom: 0.5em;

  @media print {
    display: none;
  }
}

div.leaflet-container {
  position: absolute;
  flex: 1;
  width: 100%;
  height: 100%;
  background: none;
  z-index: index($zindex, map-container);

  @include font-map-container;

  .leaflet-marker-icon {
    @include font-narrow-medium;
  }
}

.select-from-map {
  height: calc(100vh - 36px);
}

div.current-location-marker > span > svg.icon {
  font-size: 40px;
  color: $current-location-color;
}

.tripMap div.leaflet-marker-icon.place,
.summary-map div.leaflet-marker-icon.place {
  display: none;
}

div.leaflet-marker-icon.from,
div.leaflet-marker-icon.place,
div.leaflet-marker-icon.to,
div.leaflet-marker-icon.via,
div.leaflet-marker-icon.map-subway-entrance-info-icon-metro,
div.leaflet-marker-icon.parking {
  > span > svg.icon {
    width: auto;
    height: auto;
  }
}

div.leaflet-marker-icon.via {
  color: $black;
}

div.leaflet-marker-icon.vehicle-icon {
  > span > svg.icon {
    width: 1.5em;
    height: 1.5em;
  }
}

.map-with-tracking-buttons {
  z-index: 401;
  bottom: 192px;
  display: flex;
  flex-direction: column;
  right: 30px;
  max-width: calc(100% - 2em);
  position: absolute;

  [role='button'] {
    max-height: 36px;
    max-width: 36px;
    cursor: pointer;

    &:hover {
      background: $button-hover-color;
    }
  }

  & > * {
    z-index: index($zindex, map-buttons);
  }

  & > *:not(:first-child) {
    margin-left: 0.5em;
  }

  &.roomForZoomControl {
    margin-left: 48px;
  }
}

.toggle-positioning-container {
  background-color: $white;
  padding: 6px;
  border-radius: 5px;
  line-height: 0.5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-settings-button {
  &,
  &:hover,
  &:active,
  &:focus {
    z-index: index($zindex, map-buttons);
    position: absolute;
    bottom: 20px;
    left: 15px;
    background: $primary-color;
    border-radius: 50px;
    font-weight: 325;
    display: flex;
    font-size: 12px;
    color: white;
    padding: 5px 10px;
    letter-spacing: -0.3px;
  }
}

.map-routing-button {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 7px 10px 5px 10px;
  position: absolute;
  min-width: 10.375em;
  height: 2.125em;
  right: 15px;
  top: 25px;
  z-index: 3;
  background: #fff;
  color: $primary-color;
  font-weight: $font-weight-medium;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;

  &:hover {
    color: $primary-color;
    background: darken($color: #fff, $amount: 10);
  }

  &:focus {
    background: #fff;
    outline: 1px solid black;
    color: $primary-color;
  }

  .map-routing-button-icon {
    color: $primary-color;
    margin: 3px 5px 0 0;
  }
}

.map-routing-modal-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.map-routing-modal {
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  width: 100%;
  transform: translate(-50%, -50%);
  max-width: 335px;
  padding: 35px 20px 20px 20px;

  .map-routing-modal-header {
    font-family: $heading-font-family;
    font-size: $font-size-large;
    font-weight: $font-weight-medium;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    letter-spacing: -0.3px;
    color: #333;
  }

  .map-routing-modal-button-container {
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 8px;
    width: 295px;
    display: flex;
    flex-direction: column;

    .map-routing-modal-button {
      width: 100%;
      height: 50px;
      background: #fff;
      font-weight: $font-weight-medium;
      color: $primary-color;
      padding-left: 20px;
      text-align: left;
    }

    .map-routing-modal-button:nth-of-type(2) {
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }
  }
}

.icon-mapMarker-toggle-positioning {
  font-size: 24px;
}

.vehicle-popup {
  left: -19px !important;

  .route-header {
    height: 5em;
    border: none;

    h1 {
      display: flex;
      padding: 0.5em;
      margin: 0;
      font-family: $font-family-narrow;
      font-size: $font-size-xlarge;
    }
  }

  .leaflet-popup-content-wrapper {
    border-radius: $border-radius;
    padding: 0;
    margin-bottom: 5px;
  }

  .leaflet-popup-content {
    margin: 0;
    width: 18rem !important;

    &.leaflet-popup-scrolled {
      overflow: inherit;
    }

    .card-sub-header {
      display: flex;
    }
  }

  .card {
    border: none;

    > a {
      display: block;
    }

    hr {
      height: 1px;
      color: #ddd;
      background: #ddd;
      font-size: 0;
      border: 0;
    }

    .card-row .no-margin:last-child hr {
      display: none;
    }
  }

  .card-header {
    border-radius: $border-radius;
  }

  .bottom {
    @include font-medium;

    font-size: $font-size-small;
    line-height: $line-height-normal;
    color: $link-color;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: $background-color;
    border-top: solid 1px #ddd;

    div,
    a,
    button {
      display: block;
      padding: 0.5em 12px;
      flex-grow: 1;
      text-align: center;
      text-decoration: none;

      &:first-child {
        border-right: 1px solid $light-gray;
      }
    }
  }

  .leaflet-popup-tip-container {
    margin: -5px 5px;
    left: 0;

    .leaflet-popup-tip {
      background: $background-color;
    }
  }
}

.location-popup-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  margin: 15px 14px 10px;

  .location-address {
    font-size: 0.9375em;
    font-weight: $font-weight-medium;
  }

  .location-place {
    margin-top: 4px;
    font-size: 0.8125em;
    display: flex;
    flex-direction: row;

    .zone-icon-container {
      margin-left: 6px;
    }

    .circle {
      padding: 0 3px 0 2px;

      &.A {
        padding: 0 3px 0 3px;
      }

      &.B {
        padding: 0 3px 0 2.5px;
      }

      &.D {
        padding: 0 3px 0 3px;
      }
    }
  }
}

.popup {
  .route-header {
    height: auto;
    border: none;
  }

  .leaflet-popup-content-wrapper {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 0;
    margin-bottom: 5px;
    border-radius: 5px;
  }

  .leaflet-popup-content {
    margin: 0;

    &.leaflet-popup-scrolled {
      overflow: inherit;
      height: auto !important;
    }
  }

  .card {
    border: none;
    border-radius: 4px;

    > a {
      display: block;
    }

    hr {
      height: 1px;
      color: #ddd;
      background: #ddd;
      font-size: 0;
      border: 0;
    }

    .card-row .no-margin:last-child hr {
      display: none;
    }
  }

  .card.no-margin {
    margin: 0;
  }

  .card-header {
    border-radius: $border-radius;
  }

  .bottom {
    @include font-medium;

    font-size: 16px;
    line-height: $line-height-normal;
    color: $link-color;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 10px 10px;
    border-radius: 5px;
    background: $white;
    border: solid 1px #ddd;

    div,
    a,
    button {
      height: 26px;
      min-width: 100px;
      display: flex;
      font-size: 0.8125em;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      text-align: center;
      text-decoration: none;
      border-left: 1px solid $light-gray;

      &:first-child {
        border-left: none;
      }
    }

    button {
      @include font-medium;
    }
  }

  .leaflet-popup-tip-container {
    margin-top: -6px;

    .leaflet-popup-tip {
      width: 15px;
      height: 15px;
    }
  }
}

.single-popup {
  .leaflet-popup-content {
    width: 320px;
  }
}

.narrow-popup {
  .leaflet-popup-content {
    width: 220px;
  }
}

.choice-popup {
  .leaflet-popup-content {
    min-width: 240px;
    width: max-content;
  }
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

div.origin-popup {
  font-size: $font-size-xxsmall;
  cursor: pointer;
  min-width: 15em;
  left: -21px !important;

  .origin-popup-header {
    @include font-medium;

    text-transform: uppercase;
    color: $link-color;
    width: 90%;
    margin-bottom: 3px;

    .icon {
      margin: 0 0 -2px 8px;
      font-size: $font-size-small;
    }
  }

  .leaflet-popup-content-wrapper {
    border-radius: $border-radius;
    padding: 0;
    overflow: hidden;

    .leaflet-popup-content {
      margin: 12px 8px 8px 8px;

      svg.right-arrow {
        height: 9px;
      }

      .card-code {
        margin-right: 5px;
        padding: 2px;
      }
    }
  }

  .origin-popup-name {
    @include font-book;

    height: 1.5em;
    width: 200px;
    text-transform: none;
    color: $black;
    font-size: $font-size-small;
    overflow: hidden;
  }

  .shade-to-white {
    background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    width: 2em;
    height: 1.5em;
    position: absolute;
    right: 0;
    top: 2em;
  }

  .leaflet-popup-tip-container {
    position: relative;
    left: 0;
    margin: 0 0;
  }
}

.vehicle-number-container-v-map {
  position: relative;
  bottom: 40px;
  left: 41px;

  .vehicle-number-map {
    margin-right: 1.5em;
    margin-left: 0.3em;
    mask-image: none;
    max-width: none;
  }
}

.route-header {
  .route-header-trip {
    position: relative;
    height: 1.5em;
    margin-top: 0.2em;
    margin-left: 1.5em;
    font-size: 70%;
    padding: 0.1em 0.4em;
    border: solid 1px $light-gray;
    border-radius: $border-radius;
    color: $gray;
  }
}

.map .stop-halo {
  fill: #fff;
  fill-opacity: 1;
}

.map .stop {
  stroke: currentcolor;
  stroke-opacity: 1;
  fill: #fff;
  fill-opacity: 1;
}

.map .icon.stop-marker {
  width: auto;
  height: auto;
}

/* BEWARE! This is an ugly hack.
 * It so happens that firefox will not allow SVG clicks to bubble to DOM if pointer-events: none is not set.
 * If we set pointer-events: none for all browsers, then we lose "pointer cursor" for all browsers.
 * This css selector targets only firefox: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
 */
@-moz-document url-prefix() {
  .map .stop {
    pointer-events: none;
  }

  .map .stop-halo {
    pointer-events: none;
  }
}

.map .thin .stop,
.map .thin .stop-small {
  stroke-opacity: $stop-thin-opacity;
  fill-opacity: $stop-thin-opacity;
}

.map .stop-small {
  stroke: #fff;
  stroke-opacity: 1;
  fill: currentcolor;
  fill-opacity: 1;
}

.map .icon.mode-icon {
  height: 100%;
  width: 100%;
}

.map svg use {
  pointer-events: none;
}

.map .thin .stop-small {
  stroke-opacity: $stop-thin-opacity;
  fill-opacity: $stop-thin-opacity;
}

.map .arrow-bottomLeft {
  display: flex;
  align-items: center;
  min-width: 50px;
  height: 18px;

  &.only-icon {
    min-width: 0;
  }

  .wide {
    min-width: 64px;
  }

  .map-route-icon {
    border: none;
    font-size: 18px;
  }

  div {
    @include font-narrow-medium;

    border-radius: 3px;
    height: 18px;
    width: 100%;
    margin-left: -50%;
    margin-top: -9px;
    display: flex;
    position: relative;
    left: -65%;
    top: 100%;
    white-space: nowrap;
    background-color: var(--background-color);

    .map-route-number {
      width: calc(100% - 18px);
      display: flex;
      justify-content: center;
      padding-right: 3px;
      color: $white;
    }

    &::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid var(--background-color);
      border-right: 15px solid transparent;
      border-top: 0 solid transparent;
      border-bottom: 15px solid var(--background-color);
      right: -10px;
      top: -14px;
      transform: skewX(-60deg);
    }
  }
}

.map .arrow-bottomLeft.only-icon div::before {
  border-right: 10px solid transparent;
}

.map .arrow-bottomRight {
  display: flex;
  align-items: center;
  min-width: 50px;
  height: 18px;

  &.only-icon {
    min-width: 0;
  }

  .wide {
    min-width: 64px;
  }

  .map-route-icon {
    border: none;
    font-size: 18px;
  }

  div {
    @include font-narrow-medium;

    border-radius: 3px;
    height: 18px;
    width: 100%;
    margin-left: -50%;
    margin-top: -9px;
    display: flex;
    position: relative;
    left: 65%;
    top: 100%;
    white-space: nowrap;
    background-color: var(--background-color);

    .map-route-number {
      width: calc(100% - 18px);
      display: flex;
      justify-content: center;
      padding-right: 3px;
      color: $white;
    }

    &::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid var(--background-color);
      border-right: 15px solid transparent;
      border-top: 0 solid transparent;
      border-bottom: 15px solid var(--background-color);
      top: -14px;
      transform: skewX(40deg);
    }
  }
}

.map .arrow-bottomRight.only-icon div::before {
  border-right: 9px solid transparent;
}

.map .arrow-topRight {
  display: flex;
  align-items: center;
  min-width: 50px;
  height: 18px;

  &.only-icon {
    min-width: 0;
  }

  .wide {
    min-width: 64px;
  }

  .map-route-icon {
    border: none;
    font-size: 18px;
  }

  div {
    @include font-narrow-medium;

    border-radius: 3px;
    height: 18px;
    width: 100%;
    margin-left: -50%;
    margin-top: -9px;
    display: flex;
    position: relative;
    left: 65%;
    top: -130%;
    white-space: nowrap;
    background-color: var(--background-color);

    .map-route-number {
      width: calc(100% - 18px);
      display: flex;
      justify-content: center;
      padding-right: 3px;
      color: $white;
    }

    &::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-right: 0 solid var(--background-color);
      border-left: 15px solid transparent;
      border-bottom: 0 solid transparent;
      border-top: 15px solid var(--background-color);
      top: 15px;
      transform: skewX(120deg);
      right: 42px;
    }
  }
}

.map .arrow-topRight.only-icon div::before {
  border-left: 15px solid transparent;
  right: 11px;
}

.map .arrow-topLeft {
  display: flex;
  align-items: center;
  min-width: 50px;
  height: 18px;

  &.only-icon {
    min-width: 0;
  }

  .wide {
    min-width: 64px;
  }

  .map-route-icon {
    border: none;
    font-size: 18px;
  }

  div {
    @include font-narrow-medium;

    border-radius: 3px;
    height: 18px;
    width: 100%;
    margin-left: -50%;
    margin-top: -9px;
    display: flex;
    position: relative;
    left: -70%;
    top: -130%;
    white-space: nowrap;
    background-color: var(--background-color);

    .map-route-number {
      width: calc(100% - 18px);
      display: flex;
      justify-content: center;
      padding-right: 3px;
      color: $white;
    }

    &::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-right: 0 solid var(--background-color);
      border-left: 15px solid transparent;
      border-bottom: 0 solid transparent;
      border-top: 15px solid var(--background-color);
      top: 15px;
      transform: skewX(45deg);
      right: -5px;
    }
  }
}

.map .legmarker {
  display: flex;
  align-items: center;
  min-width: 50px;
  height: 18px;

  &.only-icon {
    min-width: 0;
    align-items: normal;
  }

  .wide {
    min-width: 64px;
  }

  &.speech-bubble-topRight {
    background-color: transparent;

    div {
      box-shadow: -8px 9px 8px 0 rgba(0, 0, 0, 0.3);

      @include font-medium;

      font-size: 15px;
      border-radius: 8px;
      height: 30px;
      padding: 0 7px;
      background-color: $white;
      margin: 0;
      line-height: 2;
      position: relative;
      left: 15%;
      top: -35px;
    }

    ::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid transparent;
      border-right: 15px solid #fff;
      border-top: 0 solid #fff;
      border-bottom: 15px solid transparent;
      left: -12px;
      bottom: -11px;
      transform: skewX(-60deg);
      box-shadow: #333;
    }
  }

  &.speech-bubble-topLeft {
    background-color: transparent;

    div {
      box-shadow: 7px 10px 11px 0 rgba(0, 0, 0, 0.3);

      @include font-medium;

      font-size: 15px;
      border-radius: 8px;
      height: 30px;
      padding: 0 7px;
      background-color: $white;
      margin: 0;
      line-height: 2;
      position: relative;
      left: -110%;
      top: -35px;
    }

    ::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid transparent;
      border-right: 15px solid #fff;
      border-top: 0 solid #fff;
      border-bottom: 15px solid transparent;
      left: 95px;
      bottom: -11px;
      transform: skewX(30deg);
    }
  }

  &.speech-bubble-bottomLeft {
    div {
      box-shadow: 10px -5px 17px 0 rgba(0, 0, 0, 0.3);

      @include font-medium;

      font-size: 15px;
      border-radius: 8px;
      height: 30px;
      padding: 0 7px;
      background-color: $white;
      margin: 0;
      line-height: 2;
      position: relative;
      left: calc(-100% - 10px);
      top: 90%;
    }

    ::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid #fff;
      border-right: 15px solid transparent;
      border-top: 0 solid transparent;
      border-bottom: 15px solid #fff;
      right: -10px;
      top: -11px;
      transform: skewX(-60deg);
    }
  }

  &.speech-bubble-bottomRight {
    div {
      box-shadow: -10px -7px 12px 0 rgba(0, 0, 0, 0.3);

      @include font-medium;

      font-size: 15px;
      border-radius: 8px;
      height: 30px;
      padding: 0 7px;
      background-color: $white;
      margin: 0;
      line-height: 2;
      position: relative;
      left: 15px;
      top: 90%;
    }

    ::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      border-left: 0 solid #fff;
      border-right: 15px solid transparent;
      border-top: 0 solid transparent;
      border-bottom: 15px solid #fff;
      right: 95px;
      top: -11px;
      transform: skewX(-140deg);
    }
  }

  .map-route-icon {
    border: none;
    font-size: 18px;
  }

  div {
    @include font-narrow-medium;

    background-color: var(--background-color);
    border-radius: 3px;
    height: 18px;
    width: 100%;
    margin-left: -50%;
    margin-top: -9px;
    display: flex;
    white-space: nowrap;

    .map-route-number {
      width: calc(100% - 18px);
      display: flex;
      justify-content: center;
      padding-right: 3px;
      color: $white;
    }
  }
}

.map .leg-halo {
  stroke: #fff;
  stroke-opacity: 1;

  &.opaque {
    stroke: currentcolor;
    stroke-opacity: 0.5;
  }

  &.walk,
  &.bicycle_walk,
  &.citybike_walk {
    stroke-linecap: round;
    stroke-dasharray: 0.1 11;
  }
}

.map .leg {
  stroke-opacity: 1;

  &.opaque {
    stroke: #fff;
    stroke-opacity: 0.4;
  }

  &.walk,
  &.bicycle_walk,
  &.citybike_walk {
    stroke: round;
    stroke-dasharray: 0.1 11;
  }
}

.map .thin {
  stroke-opacity: 0.5;
}

.map-line.ferry-external.leg {
  color: $external-feed-map-color;
}

.map-line.taxi-external.leg {
  color: $external-feed-map-color;
}

.map-line.scooter.leg {
  color: $scooter-map-color;
}

.map-line.walk-inside.leg {
  color: #fff;
  stroke: round;
  stroke-dasharray: 0.1 11;
}

.leg-halo.walk-inside.map-line {
  stroke: $walk-inside-color;
}

/* Fix to default leaflet behavior */
.leaflet-map-pane svg {
  position: relative;

  &.icon-badge {
    transform: translate(-0.5em, -2.5em);
    border-radius: 50%;

    > .badge-circle {
      stroke-width: 14%;
    }
  }
}

div.map-click-prevent-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 801;
}

div.leaflet-control-scale.leaflet-control {
  // front page
  margin-right: 30px;
  margin-bottom: 20px;
  cursor: grab;
}

.map.full .leaflet-control-scale.leaflet-control {
  // stop & ininerary page mobile
  margin-right: 60px;
  margin-bottom: 20px;
  cursor: grab;
}

.desktop .map.full .leaflet-control-scale.leaflet-control {
  // stop & ininerary page mobile
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: grab;
}

.desktop .map {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

div.leaflet-control-scale-line {
  text-align: right;
  margin-bottom: -4px;
  cursor: grab;
  background: rgba(255, 255, 255, 0);
  border: none;
}

.leaflet-control-scale::after {
  content: '';
  display: block;
  border-bottom: 1px solid #888;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
  height: 4px;
  background: none;
  cursor: grab;
}

.smallspinner {
  div.spinner-loader {
    width: $spinner-size * 0.5;
    height: $spinner-size * 0.5;
  }
}

.leaflet-tooltip.geoJsonText {
  direction: 'center';
  box-shadow: none;
  border: none;
  background: transparent;
  cursor: none;

  // interactive: false;
  font-size: 50px;
  color: $primary-color;
}

.leaflet-popup.geoJsonPopup {
  @include font-medium;

  .leaflet-popup-content-wrapper {
    border-radius: $border-radius;
  }
}

.select-from-map-confirm-button {
  position: absolute;
  z-index: 3000;
  height: 50px;
  width: 60%;
  border-radius: 25px;
  bottom: 15%;
  background-color: var(--color);
  font-family: $button-font-family;
  font-size: 18px;
  font-weight: $font-weight-medium;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.6px;
  text-align: center;
  color: #fff;
  max-width: 300px;

  &:hover {
    border-color: var(--hover-color);
    background-color: var(--hover-color);
    color: #fff;
  }

  &.select-from-map-confirm-button[disabled]:hover {
    background-color: #bbb;
    opacity: 1;
  }

  &.disabled {
    background-color: #bbb;
    opacity: 1;
  }
}

.leaflet-marker-icon > svg {
  position: absolute;
  border-radius: 50%;
  border: solid 1px $white;
}

.z-1,
.zundefined {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
  }
}

.z1,
.z2,
.z3,
.z4,
.z5 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
  }
}

.z6 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: -4px;
  }
}

.z7 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
  }
}

.z8 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
  }
}

.z9 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
}

.z10 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }
}

.z11 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    margin-left: -11px;
  }
}

.z12 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -13px;
  }
}

.z13 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 31px;
    height: 31px;
    margin-top: -15px;
    margin-left: -15px;
  }
}

.z14 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    margin-left: -17px;
  }
}

.z15 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
}

.z16 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 44px;
    height: 44px;
    margin-top: -22;
    margin-left: -22px;
  }
}

.z17 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
  }
}

.z18,
.z19,
.z20,
.z21,
.z22 {
  img.leaflet-marker-icon.icon-zone.leaflet-zoom-animated {
    width: 54px;
    height: 54px;
    margin-top: -27px;
    margin-left: -27px;
  }
}