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

@tailwind base;
@tailwind components;
@tailwind utilities;

a,
u {
  text-decoration: none;
}

.navbar {
  a {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;

    &:before {
      left: 1rem;
      content: "> ";
      position: absolute;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -ms-transition: 300ms;
      -o-transition: 300ms;
      transition: 300ms;
      opacity: 0;
    }

    &:hover {
      padding-left: 2rem;

      &:before {
        left: 1.25rem;
        opacity: 1;
      }
    }
  }
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 1px solid black;

  a {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
  }
}

.leaflet-bar a:hover, .leaflet-bar a:focus {
  background-color: black;
  color: white;
}

.leaflet-control-geosearch {
  &.active {
    a {
      background-color: black;

      &:before {
        border-top: 2px solid white !important;
      }
      &:after {
        border: 2px solid white !important;
      }
    }
  }
  a {
    &:hover {
      &:before {
        border-top: 2px solid white !important;
      }
      &:after {
        border: 2px solid white !important;
      }
    }
  }
}

@keyframes fade {
  from { opacity: 0.2; }
}

/*When marker is active*/
.blinking {
  animation: fade .7s infinite alternate;
}

.pointer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  z-index: 99999;
  margin: auto;
  pointer-events: none;

  &:after, &:before {
    content: "";
    position: absolute;
    background: #000;
    margin: auto;
    border-radius: 50%;
  }

  &:after {
    width: 100%;
    height: 2px;
    top: 0;
    bottom: 0;
  }

  &:before {
    height: 100%;
    width: 2px;
    left: 0;
    right: 0;
  }
}