@import '~styles/layout.scss';
@import '~styles/settings.scss';

.container {
  position: absolute;
  width: 100%;
  top: $navbar-height;
  height: $header-height;
  background-color: $light-gray;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in;

  &.isOpen {
    opacity: 1;
    pointer-events: all;
  }

  @media #{$tablet-landscape} {
    position: relative;
    height: 100%;
    opacity: 1;
    pointer-events: all;
    top: 0;
    background-color: transparent;
  }
}

.map {
  height: 100%;
}

.legend {
  position: absolute;
  left: 15px;
  bottom: 15px;

  @media #{$tablet-landscape} {
    left: 0;
  }
}

.buttons {
  position: absolute;
  right: 10px;
  top: $gutter-padding;
  z-index: 1;
}

.title {
  position: absolute;
  left: 0;
  top: $gutter-padding;
  opacity: 1;
  width: 100%;
  font-weight: $font-weight;
  font-size: $font-size-large;
  color: $theme-color;

  @media #{$tablet-landscape} {
    display: block;
  }
}

@import '~styles/layout.scss';
@import '~styles/settings.scss';

.container {
  position: absolute;
  width: 100%;
  top: $navbar-height;
  height: $header-height;
  background-color: $light-gray;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in;

  &.isOpen {
    opacity: 1;
    pointer-events: all;
  }

  @media #{$tablet-landscape} {
    position: relative;
    height: 100%;
    opacity: 1;
    pointer-events: all;
    top: 0;
    background-color: transparent;
  }
}

.map {
  height: 100%;
}

.legend {
  position: absolute;
  left: 15px;
  bottom: 15px;

  @media #{$tablet-landscape} {
    left: 0;
  }
}

.buttons {
  position: absolute;
  right: 10px;
  top: $gutter-padding;
  z-index: 2;
}

.title {
  position: absolute;
  left: 0;
  top: $gutter-padding;
  opacity: 1;
  width: 100%;
  font-weight: $font-weight;
  font-size: $font-size-large;
  color: $theme-color;
  z-index: 2;

  @media #{$tablet-landscape} {
    display: block;
  }
}

Fix title and buttons z index
Fix title and buttons z index
