@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

  display: block;
  height: 100%;
  width: 60%;

  .leaflet-container {
    height: 100%;
    background-color: nb-theme(background-basic-color-2);
  }

  ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
    z-index: 997;
  }

  ::ng-deep .leaflet-bar {
    box-shadow: none;
  }

  ::ng-deep .leaflet-control-zoom {
    border: none;

    a {
      background-color: nb-theme(color-primary-default);
      color: nb-theme(text-alternate-color);
      border-bottom: none;
    }

    .leaflet-disabled {
      background-color: nb-theme(color-primary-disabled);
    }

    .leaflet-control-zoom-in {
      border-top-left-radius: nb-theme(button-rectangle-border-radius);
      border-top-right-radius: nb-theme(button-rectangle-border-radius);
    }

    .leaflet-control-zoom-out {
      margin-top: 1px;
      border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
      border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
    }
  }

  ::ng-deep .leaflet-control-attribution {
    background: transparent;
  }

  @include media-breakpoint-down(sm) {
    width: 100%;
    height: 50%;
  }
}