@use '../../shared/styles/variables' as *;

.map-fullscreen-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 8px;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #30394b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);

  transition: 0.2s ease;

  &:hover {
    color: #031d9a;
    background: #f1f4f8;
  }
}

.leaflet-touch .leaflet-bar {
  border: none !important;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  --sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  width: 36px !important;
  height: 36px !important;
  border: none !important;
  border-radius: 8px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  font: 28px / 100% var(--sans) !important;
  font-weight: 500 !important;
  text-indent: 0 !important;

  transition: 0.2s ease;

  &:hover {
    background-color: #ffffff !important;
    color: $blue !important;
  }
}

.leaflet-top.leaflet-left {
  top: 50%;
  left: auto;
  right: 12px;
  transform: translateY(-50%);
}

.leaflet-left .leaflet-control {
  margin-left: 0 !important;
}

.leaflet-top .leaflet-control {
  margin-top: 0 !important;
}

[data-theme='dark'] {
  .map-fullscreen-button {
    background: $white;
    color: $neutral-900;
    box-shadow: 0 8px 18px rgba($black, 0.22);

    &:hover {
      background: $white;
      color: $color-primary;
    }
  }

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    background: $white !important;
    color: $neutral-900 !important;
    box-shadow: 0 8px 18px rgba($black, 0.22) !important;

    &:hover {
      background: $white !important;
      color: $color-primary !important;
    }
  }
}
